Mastering Web Application

Chapter 5

Select a user object with the list grouped by sex:

ng-options="getFullName(user) group by user.sex for user in users"

Try it at http://bit.ly/1157jqa.

Using object data sources

Let's provide two objects that relate country names to codes:

$scope.countriesByCode = {

'AF' : 'AFGHANISTAN',

'AX' : 'ÅLAND ISLANDS',

...

};

$scope.countriesByName = {

'AFGHANISTAN' : 'AF',

'ÅLAND ISLANDS' : 'AX',

...

};

To select a country code by country name, ordered by country code:

ng-options="code as name for (code, name) in countriesByCode"

To select a country code by country name, ordered by country name:

ng-options="code as name for (name, code) in countriesByName"

Try it at http://bit.ly/153LKdE.

Now that we have seen some examples, we can show the full specification of
these expressions.

Understanding the dataSource expression

If the data source will be an array then the arrayExpression should evaluate to
an array. The directive will iterate over each of the items in the array, assigning the
current item in the array to the value variable.

The list of select options will be displayed in the same order as the

items appear in the array.

If the data source will be an object then the objectExpression should evaluate to an
object. The directive will iterate over each property of the object, assigning the value
of the property to the value variable and the key of the member to the key variable.