2

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

SuReSh
  • 1,503
  • 1
  • 22
  • 47
  • If you want to get rid of blank option. Select first item in your controller. See this answer for details: http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select?rq=1 – user2323308 Dec 28 '15 at 06:24
  • As i told already.. my select tab is dynamically created. so that how i assign value to ng-model ? – SuReSh Dec 28 '15 at 06:27
  • You stated your problem, but not what you are trying to achieve. Do you always want the first option to start as selected? – tasseKATT Dec 28 '15 at 06:39
  • @SureshRatten you can use `ng-init` to initialize your `ng-model` this way you won't get an empty value in the dropdown. – Minato Dec 28 '15 at 07:38
  • Possible duplicate of [Why does AngularJS include an empty option in select?](http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) – Paul Sweatte Jan 21 '17 at 04:14

3 Answers3

2

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

Minato
  • 4,383
  • 1
  • 22
  • 28
  • Yes its help me but i am not able to show selected first option. – SuReSh Dec 28 '15 at 07:58
  • I have done it for the first option that is there in the `Array` by default but for example if you want to persist this change.. like when `pd[x.title]` is already initialized it'll have that option there – Minato Dec 28 '15 at 08:01
0

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

Community
  • 1
  • 1
Umer Hayyat
  • 396
  • 1
  • 5
  • 13
0

use a hard coded empty value

<option value="" ng-if="false"></option>
anoop m m
  • 315
  • 3
  • 11