CODEWITHSUNDEEP
angularjshtmlionic-frameworkhybrid-mobile-app
SuReSh
SuReSh

Reputation: 1511

AngularJS - Extra blank option added when i use ng-repeat in select tag

I am facing some issue on select tab when using in ng-repeat. On Stackoverflow i found many solution related to my broblem but i am not able to solve my broblem.

Here is my code.. on the top of page i define my controler

<ion-view view-title="Product" ng-controller="productCtrl as pd">

and on controller

self.pdata = response;

On html page my code is..

<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
    <h5>{{x.title}}</h5>
    <select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
      <option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
    </select>
</div>

here my select tab is in ng-repeat loop so that every time my ng-model is define dynamically.

My Problem is:-extra blank option added using ng-repeat in select tag

Upvotes: 2

Views: 1515

Answers (3)

Minato
Minato

Reputation: 4533

modify your select tag like this, it's a bit mouthful but works alternatively you can also keep your option tag and remove ng-options from my select tag.

<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>

here is a jsFiddle

Upvotes: 3

Anoop M M
Anoop M M

Reputation: 317

use a hard coded empty value

<option value="" ng-if="false"></option>

Upvotes: 0

Umer Hayyat
Umer Hayyat

Reputation: 406

Initially problem seems to be here

value="{{y.value_id}}"

see more here The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options

Upvotes: 0

Related Questions