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 ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>
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.
This was best suited for all scenarios according to me:
<select ng-model="mySelection.value">
<option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
</option>
</select>
where you can use your model to bind the data. You will get the value as the object will contain and the default selection based on your scenario.
I had this issue too. I wasn't able to set my value in ng-options. Every option that was generated was set with 0, 1, ..., n.
To make it right, I did something like this in my ng-options:
<select ng-options="room.name for room in Rooms track by room.price">
<option value="">--Rooms--</option>
</select>
I use "track by" to set all my values with room.price
.
(This example sucks: because if there were more than one price equal, the code would fail. So BE SURE to have different values.)
$scope.Rooms = [
{ name: 'SALA01', price: 100 },
{ name: 'SALA02', price: 200 },
{ name: 'SALA03', price: 300 }
];
I learned it from blog post How to set the initial selected value of a select element using Angular.JS ng-options & track by.
Watch the video. It's a nice class :)
Selecting an item in ng-options can be a bit tricky depending on how you set the data source.
After struggling with them for a while I ended up making a sample with most common data sources I use. You can find it here:
http://plnkr.co/edit/fGq2PM?p=preview
Now to make ng-options work, here are some things to consider:
key | label
. Many online examples put objects as 'key', and if you need information from the object set it that way, otherwise use the specific property you need as key. (ID, CODE, etc.. As in the plckr sample)The way to set the value of the dropdown/select control depends on #3,
$scope.dropdownmodel = $scope.user.state;
If you set the object as key, you need to loop trough the options, even assigning the object will not set the item as selected as they will have different hashkeys, e.g.:
for (var i = 0, len = $scope.options.length; i < len; i++) {
if ($scope.options[i].id == savedValue) { // Your own property here:
console.log('Found target! ');
$scope.value = $scope.options[i];
break;
}
}
You can replace savedValue for the same property in the other object, $scope.myObject.myProperty
.
<select ng-model="output">
<option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>