How to make a preselection for a select list generated by AngularJS?

Question

<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>

This correctly creates a select list to choose the team captain. However, by default a blank option is selected. How can we preselect the first player from the list instead?

<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
  <option value="0">John</option>
  <option value="1">Bobby</option>
</select>

I tried adding ng-init="team.captain='0'" but that didn't help.

Update Apparently this happens because

a value referenced by ng-model doesn't exist in a set of options passed to ng-options.

Source: Why does AngularJS include an empty option in select?

However, the question still remains why using ng-init doesn't work?

<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>

You can solve with this Magic Trick: stackoverflow.com/a/38700685/3323601 — krusk8
– krusk8, Commented Aug 1, 2016 at 13:58

randomguy · Accepted Answer · 2013-01-12 21:25:07Z

34

Here's what worked:

<select ng-init="team.captain=team.players[0]" 
        ng-model="team.captain" 
        ng-options="player.name for player in team.players"></select>

And what didn't work:

ng-init="team.captain='0'"
ng-init="team.captain='John'"

My guess is that Angular goes beyond simple comparison of values or labels. It probably compares object references.

edited Jan 12, 2013 at 21:25

answered Jan 12, 2013 at 21:02

randomguy

12.3k16 gold badges77 silver badges102 bronze badges

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

2 Comments

Mark Rajcok Over a year ago

I should have mentioned in my answer that the "label" value needs to be reference to the same object in the array. In other words, this won't work either: ng-init="{name: 'John'}"

Japheth Ongeri - inkalimeva Over a year ago

In case anyone here is trying to achieve the same thing with angular material md-select then check out this answer stackoverflow.com/a/38639823/3836923

Gerald LeRoy · Accepted Answer · 2015-01-17 00:24:41Z

15

Here's an alternate method for initializing a drop down menu using AngularJS.

(working example on JS Fiddle: http://jsfiddle.net/galeroy/100ho18L/1/)

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" ng-controller="myController">

    <select 
        ng-model="carSelection"
        ng-options = "x.make for x in cars">
    </select>

    <script>

        function myController($scope) {

            $scope.cars = [
                {"make": "Nissan", "model": "Sentra"},
                {"make": "Honda", "model": "Prelude"},
                {"make": "Toyota", "model": "Prius"}
            ]

            $scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
        }

    </script>

</body>

edited Jan 17, 2015 at 0:24

answered Jan 17, 2015 at 0:12

Gerald LeRoy

1,2872 gold badges11 silver badges18 bronze badges

2 Comments

Kamel Mili Over a year ago

hey you seem like familiar with initializing combo boxes , just question if it doesn't bother you , this one if you have one select box ope.carSelection = $scope.cars[1]; what if i want to initialize in a dynamic number of combo boxes and i want to initilize them all the same value what would i do here's my question stackoverflow.com/questions/37351051/… and thank you

chiliNUT Over a year ago

key that it had to be a reference to the same object, I tried using a different object with a corresponding id. +1

Mark Rajcok · Accepted Answer · 2013-01-12 21:07:06Z

5

As @camus already mentioned in a comment, you need to set the model to a valid "label" value (or reference), not an index value. This is a bit odd since you can see an index value being used in the HTML.

Angular sets the value attributes in the HTML as follows:

when using array as datasource, it will be the index of array element in each iteration;
when using object as datasource, it will be the property name in each iteration.

When an item is selected, Angular looks up the correct entry in the array/object based on the index or property name.

edited Jan 12, 2013 at 21:07

answered Jan 12, 2013 at 20:52

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Comments

Nate Anderson · Accepted Answer · 2016-11-26 08:15:52Z

4

What about ng-selected, as seen in this jsfiddle:

<select ng-model="val">
  <option ng-repeat="opt in options" ng-selected="$first">
    {{ opt }}
  </option>
</select>

edited Nov 26, 2016 at 8:15

Nate Anderson

21.6k22 gold badges113 silver badges155 bronze badges

answered Mar 12, 2016 at 11:41

Arpit Aggarwal

29.5k16 gold badges97 silver badges110 bronze badges

1 Comment

Vaibhav Jain Over a year ago

It worked but when used on option tag instead of select

Amardeep Kohli · Accepted Answer · 2017-09-05 07:29:19Z

1

I achieved this using ng-model and ng-options.Basically your model and ng-options should be in sync.

When my model (projIndustry in this case) was initialized to some number then I had to use ind.ID in ng-options.(ID comparison).
When my model was initialized to object ,then I had to use ind(object) in ng-options.(Object comparison)

<select data-ng-options="ind.ID as ind.Display_Text for ind in arrIndustries" 
 data-ng-model="projIndustry" ng-change="onIndChange()" />

answered Sep 5, 2017 at 7:29

Amardeep Kohli

5123 silver badges7 bronze badges

1 Comment

Sahil Dhir Over a year ago

nice approach !!

Ishwara Bhat · Accepted Answer · 2020-12-11 06:41:14Z

In case you are using angular 2+, here is what worked. `

<mat-select matNativeControl placeholder="Select Item" [(ngModel)]="selectedItem" name="selectedCaseStudyName" (selectionChange)="onSelectionChangeHandler($event)" [ngStyle]="{'background-color':'silver'}">

        <mat-option *ngFor="let item of myItemList" [value]="item.ItemName">
            {{item.ItemName}}
        </mat-option>
    </mat-select>`

In .ts,

'selectedItem = myItemList[2].ItemName'

myItemList is list of objects with one of the fields being ItemName. Important point is to bind [(ngModel)] to variable selectedItem and then initialize it with the required index of the list. Whenever you bind [(ngModule)], make sure that you import NgModule

import {ngModule} from '@angular/core';

Collectives™ on Stack Overflow

How to make a preselection for a select list generated by AngularJS?

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related