AngularJS Built-in directives ngOptions


Example

ngOptions is a directive that simplifies the creation of a html dropdown box for the selection of an item from an array that will be stored in a model. The ngOptions attribute is used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.

With ng-options the markup can be reduced to just a select tag and the directive will create the same select:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

There is anther way of creating select options using ng-repeat, but it is not recommended to use ng-repeat as it is mostly used for general purpose like, the forEach just to loop. Whereas ng-options is specifically for creating select tag options.

Above example using ng-repeat would be

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

FULL EXAMPLE

Lets see the above example in detail also with some variations in it.

Data model for the example:

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

 <option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

f.label will be the label of the <option> and the value will contain the entire object.

FULL EXAMPLE


<!-- select as label for value in array -->
<select ng-options="f.value as f.label for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

 <option value="4"> Apples </option>

Effects:

f.value (4) will be the value in this case while the label is still the same.

FULL EXAMPLE


<!-- label group by group for value in array -->
<select ng-options="f.label group by f.value for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

Options will be grouped based on there value. Options with same value will fall under one category

FULL EXAMPLE


<!-- label disable when disable for value in array -->
<select ng-options="f.label disable when f.value == 4 for f in fruit" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

"Apples" and "Limes" will be disabled (unable to select) because of the condition disable when f.value==4. All options with value=4 shall be disabled

FULL EXAMPLE


<!-- label group by group for value in array track by trackexpr -->
<select ng-options="f.value as f.label group by f.value for f in fruit track by f.id" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option value="4"> Apples </option>

Effects:

There is not visual change when using trackBy, but Angular will detect changes by the id instead of by reference which is most always a better solution.

FULL EXAMPLE


<!-- label for value in array | orderBy:orderexpr track by trackexpr -->
<select ng-options="f.label for f in fruit | orderBy:'id' track by f.id" ng-model="selectedFruit"></select>

Option tag generated on selection:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

Effects:

orderBy is a AngularJS standard filter which arranges options in ascending order(by default) so "Oranges" in this will appear 1st since its id = 1.

FULL EXAMPLE


All <select> with ng-options must have ng-model attached.