Angularjs 1.2 adds empty option in select

Question

I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie. The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.

ASPX:

<select id="ddlItems" data-ng-model="ItemId">
 <option value="-1">-- All Circles --</option>
 <option data-ng-repeat="item in Items" value="{{item.AreaCode}}" 
  data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>

Ctrl.js:

var promise = MyFactory.GetItems();
promise.then(function (success) {
 if (success.data != null && success.data != '') {
  var data = success.data;
  $scope.Items = data.lstItems; //bind items to dropdown      
  $scope.ItemId = itemIdFromCookie; //select default value
  alert(itemIdFromCookie); //it pops -1                       
 }
 else {
  console.log(success.data);
 }
}

Rendered HTML:

<select id="ddlItems" data-ng-model="ItemId">
 <option value="? string:"-1" ?"></option>
 <option value="-1">-- All Circles --</option>
 //...other options
</select>

@ErikE.I'm sure, because I have posted a working code.

sukesh
– sukesh

2015-12-18 03:41:27 +00:00
Commented Dec 18, 2015 at 3:41 — sukesh
– sukesh, Commented Dec 18, 2015 at 3:41
I tried your way. Doesnt bind items at all.

sukesh
– sukesh

2015-12-18 03:46:02 +00:00
Commented Dec 18, 2015 at 3:46 — sukesh
– sukesh, Commented Dec 18, 2015 at 3:46

Anik Islam Abhi · Accepted Answer · 2015-12-18 03:39:57Z

1

Try to use ngOptions instead

Like this

<select id="ddlItems" 
     data-ng-model="ItemId" 
     ng-options="item.AreaCode as item.AreaName for item in Items">
 <option value="-1">-- All Circles --</option>
</select>

answered Dec 18, 2015 at 3:39

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sukesh Over a year ago

That did not work. There is still an emtpy option tag and the first option '--All Circles--' is removed.

Anik Islam Abhi Over a year ago

can you provide fiddle ?? @Qwerty

Shujaath Khan · Accepted Answer · 2015-12-18 04:25:18Z

1

This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.

To Have some initial value. you can put default value in ng-init

For Ex : data-ng-init='data-ng-model="--SELECT--";'

Or per your Array list Item which you are getting from database set one of the values.

Remember init will get triggered b/f you complete the Ajax Call.

answered Dec 18, 2015 at 4:25

Shujaath Khan

1,39417 silver badges23 bronze badges

3 Comments

sukesh Over a year ago

I get the items & also the desired ItemId from the ajax call. Could you please suggest, how I proceed in this case.

Shujaath Khan Over a year ago

After items are bind to the select set data-ng-model value.

Shujaath Khan Over a year ago

Can you please jsfiddle it

Collectives™ on Stack Overflow

Angularjs 1.2 adds empty option in select

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related