How do I set the value property in AngularJS' ng-options?
angularjs, javascript
Solution
See ngOptions
ngOptions(optional) – {`comprehension_expression=`} – in one of the following forms:
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` 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`
In your case, it should be
array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];
<select ng-options="obj.value as obj.text for obj in array"></select>
Update
With the updates on AngularJS, it is now possible to set the actual value for the `value` attribute of `select` element with `track by` expression.
<select ng-options="obj.text for obj in array track by obj.value">
</select>
How to remember this ugly stuff
To all the people who are having hard time to remember this syntax form: I agree this isn't the most easiest or beautiful syntax. This syntax is kind of an extended version of Python's list comprehensions and knowing that helps me to remember the syntax very easily. It's something like this:
Python code:
my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]
# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']
This is actually the same syntax as the first one listed above. However, in `<select>` we usually need to differentiate between the actual value in code and the text shown (the label) in a `<select>` element.
Like, we need `person.id` in the code, but we don't want to show the `id` to the user; we want to show its name. Likewise, we're not interested in the `person.name` in the code. There comes the `as` keyword to label stuff. So it becomes like this:
person.id as person.name for person in people
Or, instead of `person.id` we could need the `person` instance/reference itself. See below:
person as person.name for person in people
For JavaScript objects, the same method applies as well. Just remember that the items in the object is deconstructed with `(key, value)` pairs.
Problem
Here is what seems to be bothering a lot of people (including me). When using the `ng-options` directive in AngularJS to fill in the options for a `<select>` tag, I cannot figure out how to set the value for an option. The documentation for this is really unclear - at least for a simpleton like me. I can set the text for an option easily like so: ``` ng-options="select p.text for p in resultOptions" ``` When `resultOptions` is for example: ``` [ { "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" } ] ``` It should be (and probably is) the most simple thing to set the option values, but so far I just don't get it.