Angular, select list first item is empty

Question

I am populating my select list like so -

<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()' 
            ng-options='obj.name for obj in array track by obj.id'>
</select>

Here is the $http behind it :

   //populate  scopes
    $http.post("/listScopes").success(function(data){
        $scope.array = data.scopes;
    });

What is happening is - I am getting a first select item that has no name and a value="?" (the rest populate fine). I can't seem to figure out why it's doing this. Any help would be much appreciated. Thanks!

PSL · Accepted Answer · 2014-08-20 18:50:18Z

4

Reason is that since your ngModel is most possibly not assigned or not assigned properly with the id, angular creates a blank option and display that as selected.

You could either add a default option:-

<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()' 
            ng-options='obj.name for obj in array track by obj.id'>
 <option value="">Please choose a level</option>
</select>

Or set your ngModel with a default value in your controller or set it in ng-init. I would do it in the controller:-

 $scope.scope1 = "id"

edited Aug 20, 2014 at 18:50

answered Aug 20, 2014 at 18:42

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

webernado · Accepted Answer · 2014-08-20 18:47:28Z

1

Angular by default creates a blank first selection to avoid accidental selection of an option. To remove this, set scope1 = obj.name where obj.name is the name of the first element in your array.

answered Aug 20, 2014 at 18:47

webernado

512 bronze badges

Comments

Avag Sargsyan · Accepted Answer · 2016-10-26 09:26:38Z

1

It seems the value of scope1 is empty or undefined, if it's empty try to define it with ng-init or in controller.

edited Oct 26, 2016 at 9:26

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 20, 2014 at 18:38

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular, select list first item is empty

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related