Angular Selects

– Forget about selectedIndex and $(element).val()


DATA
$scope.data = {{ data | json }}

A basic example

Add a model to hold the selected value (object)
Populate the list using ngOptions (similar to ngRepeat)
... remember to set the label key on the item.
Add default label with an empty value (value = "")
Angular will treat this as null


HTML
<select data-ng-model="selected"
data-ng-options="item.name for item in data">
<option value=""> Laureates </option>
</select>

RESULT $scope.selected = {{ selected1 | json }}

Pre-selecting a value

To pre-select a value simply initialize selected by referencing the data index.
This way we make sure not to break data linking.


JS
// Select the 5'th option
$scope.selected = $scope.data[4];

RESULT $scope.selected = {{ selected2 | json }}

Pre-selecting using track by

To set a selected value based on a model object add track by and point to a unique property. Warning! Do not use select as and track by in the same expression. They are not designed to work together – as describede here.


HTML
<select data-ng-model="selected"
data-ng-options="item.name for item in data track by item.name">
<option value=""> Laureates </option>
</select>
JS
$scope.selected = { name: 'Max Planck', year: 1922 }

RESULT $scope.selected = {{ selected3 | json }}

Customizing labels

To concatenate multible data values or add custom text use a regular value + ' ' + value syntax.
You don't need the ( ) – they are just added for readability.


HTML
<select data-ng-model="selected"
data-ng-options="(item.year + ' – ' + item.name)
for item in data">
<option value=""> Laureates </option>
</select>

RESULT $scope.selected = {{ selected3 | json }}

Customizing selected value

By default selected is the same object as in data. If you for some reason need it to be just one of the data properties – use "as" to convert it.


HTML
<select data-ng-model="selected"
data-ng-options="item.name as (item.year + ' – ' + item.name)
for item in data">
<option value=""> Laureates </option>
</select>

RESULT $scope.selected = {{ selected4 | json }}

Sorting the list

Like ngRepeat you can sort ngOptions by adding a filter – this does not affect data.
Note in this example both selectboxes are using the same model value
– why changing one will cause both to change.


HTML
<select data-ng-model="selected"
data-ng-options="(item.year + ' – ' + item.name)
for item in data | orderBy:'name'">
<option value=""> Laureates </option>
</select>
// Filtering does not affect the data index.
// when pre-selecting a value $scope.data[4];
// still points to the same entry "Niels Bohr"

RESULT $scope.selected = {{ selected6 | json }}

Grouping

To group options use "group by". As Angular will create the groups based on filtered data – why we do a double orderBy. First we order by gender (placing the female group first) and then a sub order by name (listing the names alphabetically).
Note grouping is case sensitive why male and Male will create two groups.


HTML
<select data-ng-model="selected7"
data-ng-options="item.year + ' – ' + item.name
group by item.gender
for item in data | orderBy:['gender','name']">
<option value=""> Laureates by gender and name </option>
</select>

RESULT $scope.selected = {{ selected7 | json }}