How do you set the value for an option in AngularJS' ng-options directive?

Retrieving Option Value in AngularJS' ng-options

In the ng-options directive, specifying the value for an option can be confusing for some. The documentation lacks clarity, but understanding the underlying comprehension expression clarifies the process.

To set the value for an option, AngularJS employs a comprehension expression, which resembles Python's list comprehensions. In AngularJS, the comprehension expression for ng-options can take various forms.

Syntax for Array Data Sources:

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr

Syntax for Object Data Sources:

label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

For your specific case, the correct syntax would be:

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

Update with AngularJS updates:

Recent AngularJS updates allow setting the actual value for the value attribute of the select element using a track by expression:

Mnemonics:

To recall the intricate syntax, it helps to break it down into smaller chunks:

label -> what you want to see on the screen
for -> indicates the array or object being iterated over
value -> what you want to be stored in the value attribute of the option
as -> used to label the value as something different on the screen (optional)
group by -> used for grouping the options (optional)
track by -> used to set the value of the value attribute of the option (optional)

By understanding the syntax and utilizing these mnemonics, you can confidently set the value property in AngularJS' ng-options.

The above is the detailed content of How do you set the value for an option in AngularJS' ng-options directive?. For more information, please follow other related articles on the PHP Chinese website!