How do I set the value property in AngularJS' ng-options?
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.
AngularJS: Set value for options in ng-options
You could have 0
& 1
for respective statuses
Markup
<select name="isMarried" id="isMarried"
class="form-control" ng-model="customer.isMarried"
ng-options="statue.value as statue.description for statue in maritalStatues">
</select>
Code
$scope.maritialStatus = [ { value : 1, description : "Yes"}, {value : 0, description : "Unmarried"}];
how to set a default value in ng-options AngularJS
You can to set at no-model
property. Example:
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
angular.module('app', []).controller('select', function($scope) { $scope.distrito = {}; $scope.distrito.entidade = {};
$scope.distritos = [{ entidade: { nome: 'test1', idEntidade: 1 } }, { entidade: { nome: 'test2', idEntidade: 2 } }];
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="select"> <select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control"> </select></div>
Can't set selected value of ng-options
That is because angular looks for object equality to bind it with your syntax and inyour case $scope.siteList[1]
is not equal to { id: 2, name: 'walking'};
(2 objects are equal only if they point to the same reference). You can get around this in many ways, one easy way is to use track by
syntax with ng-options to specify track by id
, which will enable ng-option's options to be tracked by the specified property of the bound object rather than the object reference itself.
<select ng-model="thisTour.site"
ng-options="site.name for site in siteList track by site.id"></select>
You could also use the syntax to minimally set the ng-model to specify only the id using select as part in the syntax:-
Example:-
ng-options="site.id as site.name for site in siteList"
and model would just be:-
$scope.thisTour.site = 2;
angular.module('app', []).controller('ctrl', function($scope){ $scope.thisTour = {}; $scope.siteList = [ { id: 1, name: 'cycling'}, { id: 2, name: 'walking'}, { id: 3, name: 'holidays'} ]
$scope.thisTour.site = { id: 2, name: 'walking'};})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="ctrl"> <select ng-model="thisTour.site" ng-options="site.name for site in siteList track by site.id"></select> {{thisTour.site}} </div>
Angular ng-options how to bind to one property, not entire object?
You may use the following code if you want to bound the ng-model
to itemName. Do note that you need to remove track by here for it to work as it will evaluates to undefined and the model value will not match to any options.
i.itemName as i.itemName for i in fl.combo_ItemList.itemList.
How Filter ng-options base on property in array property of object
I used something like this for Country and State filtering in my Project.
<select ng-model="userState" ng-options="state.name for state in ( states | filter: {country: { code: userCountry.code }}) track by state.name">
Try this Fiddle:
It'll help.
Click to view Fiddle.
Setting default value for select/ using ng-options with (key, value) in angularjs
The solution was to set the following default value:
$scope.selected = '1';
So I just needed to set the id
(key). In the select box was displayed "Attribute1" now and the related id is bound.
AngularJS ng-options ng-model option selected by id
Udpated the ng-options
to
ng-options="item.id as item.title for item in countries">
Answer
without track By
- JSFiddle
with track By
- JSFiddle
track by
just helps Angular internally with array sorting as far as I know. The value of the options is defined by the first argument (in your case item). If you want it to be by id then you should use item.id as item.name for item in items
send the option object when using angularjs ng-options and ng-change
The short version is as follows:
Change your <select>
markup to the following:
<select ng-model="selectedCurrency" ng-init="selectedCurrency=currencies[0]"
ng-options="currency as currency.cur_symbol+' '+currency.cur_name_he for currency in currencies track by currency.cur_iso"
ng-change="setCurrency(selectedCurrency)">
</select>
Change your $scope.setCurrency()
method to the following:
$scope.setCurrency = function (currency) {
$scope.bindRateModel = parseFloat(currency.cur_rate_in_nis);
$scope.bindCurrencyModel = currency.cur_iso;
};
Why does this work?
The first difference is that I am binding the whole currency
object to a new selectedCurrency
scope property. This gives you access to the whole object, not just the cur_iso
property. This saves you having to look through the currencies
array to find the full object.
Then I changed the ng-change
expression to pass in this whole object to $scope.setCurrency
using the scope property that it is bound to. This allows that method access to the full object.
Finally, you need to set $scope.bindCurrencyModel
inside the $scope.setCurrency()
function, so that it will equal just the field that you are interested in.
Related Topics
Prevent Execution of Parent Event Handler
Call an Asynchronous JavaScript Function Synchronously
How to Edit a JavaScript Alert Box Title
Create Object from Class Name in Javasscript Ecmascript 6
Constructors in JavaScript Objects
Selecting Null: What Is the Reason Behind Selectall(Null) in D3
Why Doesn't a JavaScript Return Statement Work When the Return Value Is on a New Line
I Know That Callback Function Runs Asynchronously, But Why
Are JavaScript Arrays Primitives? Strings? Objects
Is JavaScript Supported in an Email Message
How to Escape Regular Expression Special Characters Using JavaScript
Promise.All Consumes All My Ram
What Does (Function($) {})(Jquery); Mean
When You Pass 'This' as an Argument
Es6 Destructuring Function Parameter - Naming Root Object
Function with Foreach Returns Undefined Even with Return Statement