ng-options - w3toppers.com

How to set the value attribute for select options?

What you first tried should work, but the HTML is not what we would expect. I added an option to handle the initial “no item selected” case: <select ng-options=”region.code as region.name for region in regions” ng-model=”region”> <option style=”display:none” value=””>select a region</option> </select> <br>selected: {{region}} The above generates this HTML: <select ng-options=”…” ng-model=”region” class=”…”> <option style=”display:none” … Read more

Use filter on ng-options to change the value displayed

There’s a better way: app.filter(‘price’, function() { return function(num) { return num === 0 ? ‘free’ : num + ‘$’; }; }); Then use it like this: <select ng-model=”create_price” ng-options=”obj as (obj | price) for obj in prices”> </select> This way, the filter is useful for single values, rather than operating only on arrays. If … Read more

Angularjs ng-options using number for model does not select initial value

Angular’s documentation for the ng-select directive explains how to solve this problem. See https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (last section). You can create a convert-to-number directive and apply it to your select tag: JS: module.directive(‘convertToNumber’, function() { return { require: ‘ngModel’, link: function(scope, element, attrs, ngModel) { ngModel.$parsers.push(function(val) { return val != null ? parseInt(val, 10) : null; }); … Read more

ng-options with simple array init

You actually had it correct in your third attempt. <select ng-model=”myselect” ng-options=”o as o for o in options”></select> See a working example here: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model. As a result, the HTML will look incorrect but … Read more

ng-options with disabled rows

@lucuma’s answer (originally the accepted answer) was correct, but by now should be updated, because this was fixed in Angular 1.4. See the docs of ng-options which also contains an example. I’m using Angular 1.5 and this works for me: View <select ng-model=”$ctrl.selectedItem” ng-options=”item as item.label disable when item.disabled for item in $ctrl.listItems”> Controller vm.items … Read more

Angularjs: ng-options group by

The grouping doesn’t quite work like that, if you change your json to something like this: [ {“ID”:”1″, “TIPIS”:”GroupName1″, “DESC”:”name”}, {“ID”:”2″, “TIPIS”:”GroupName1″, “DESC”:”name1″}, {“ID”:”3″, “TIPIS”:”GroupName2″, “DESC”:”name2″}, {“ID”:”4″, “TIPIS”:”GroupName1″, “DESC”:”name3″}, ] Then you’ll get the grouping the way you want jsFiddle: http://jsfiddle.net/rtCP3/182/

key-value pairs in ng-options

use ng-option: <select ng-model=”blah” ng-options=”key as value for (key , value) in data”></select> or use ng-repeat: <select> <option ng-repeat=”(key, value) in data” value=”{{key}}”>{{value}}</option> </select> data in controller: $scope.data = { “key1”: “val1”, “key2”: “val2”, “key3”: “val3”, … };

ng-change get new value and original value

With an angular {{expression}} you can add the old user or user.id value to the ng-change attribute as a literal string: <select ng-change=”updateValue(user, ‘{{user.id}}’)” ng-model=”user.id” ng-options=”user.id as user.name for user in users”> </select> On ngChange, the 1st argument to updateValue will be the new user value, the 2nd argument will be the literal that was … Read more

Working with select using AngularJS’s ng-options

One thing to note is that ngModel is required for ngOptions to work… note the ng-model=”blah” which is saying “set $scope.blah to the selected value”. Try this: <select ng-model=”blah” ng-options=”item.ID as item.Title for item in items”></select> Here’s more from AngularJS’s documentation (if you haven’t seen it): for array data sources: label for value in array … Read more