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.
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.
AngularJS ng-options Directive The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.
The AngularJS ng-value directive is used to set the value attribute of an input element, or a select element. It is mainly used on <radio> and <option> elements to set the bound values when these elements are selected. It is supported by <input> and <select> elements.
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>
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>
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.
How the value attributes gets its value:
So in your case it should be:
obj = { '1': '1st', '2': '2nd' }; <select ng-options="k as v for (k,v) in obj"></select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With