AngularJS ngOption Directive Simplified

With AngularJS, we can use the ngOption directive to dynamically create the options that are available from the select input field. There are a few ways to use this directive and depending on the application requirements, we may choose one from another. Let’s try to simplify its usage by using some practical examples:

Demo Preview:  (see working demo below)

Bind to a String Array:

We can use this approach to bind a list of strings as options. Both the input value and text take on the array value. When an option is selected, the Value is set to the model defined by the ngModel Directive. When we look at the result from Selected Option 1 (see demo below), we can see how the selected option text is also the selected option value.

Expression	ng-options="option for option in ctrl.makes"
Description	Use the string as both value and text.

Bind to Collection of Objects:

This approach provides more flexibility since it allows us to bind to more than just a Value/Text reference. We can use an object as an option, and when the option is selected, this object is assigned to the model defined by the ngModel Directive. This means that in addition to the value, we have access to all other properties of this object. Let’s look at Seleted Option 2 (demo). As we select a value from the select control, we can see the output display the JSON contained by the object.

Expression	ng-options="car as car.model for car in ctrl.cars"
Description	Use a car object as value, use the model attribute as text.

Bind to Collection of Objects with Explicit Attributes as Key/Value Pairs:

This approach allows us to use a collection with key/value nodes. This provides the flexibility to explicitly indicate what attributes from the object should be the text and value. It also uses simple data types for the binding, so only the attributes used in the ngOption directive are assigned. If we look at Selected Option 3, we can see that the value contained in the id property is displayed.

Expression	ng-options="car.id  as car.model for car in ctrl.cars"
Description	Use attribute id as value and model as text.

Bind to Collection of Objects with Explicit JSON:

This approach is similar to the previous one, but it allows us to indicate that we may just want to use some attributes in a JSON structure from the object and only assigned those to the model. In Selected Option 4, we can see how we are only using a couple of attributes from the object and creating a JSON to map them. This is then assigned as an object to the model.

Expression	ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars track by car.id"
Description	Use JSON declaration and assigned only the attributes id and model. Use model as text. The selected value is determined by card.id

Track Selected Object:

One important item to note when using the ngOption directive with complex types is that we need to explicitly indicate what attribute should be used to track the selected option. This is done with the expression “track by”.  If this is not properly assigned, the selected text does is not displayed even though an object assignment is actually made. See Selected Option 5.

CodeProject

Expression	ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars"
Description	Use JSON declaration and assigned only the attributes id and model. Use model as text. There is no tracking of the value, so no text is displayed.

Demo:

Well I hope this provides some clarifications on how to use the ngOption directive.

Originally posted by ozkary.com