AngularJS – ngOptions: How to order by Group Name and then by Label
orderBy can take an array of multiple parameters to order by. So you can do: c as c.label group by c.group for c in data | orderBy:[‘group’,’label’] Here is a fiddle
ng-options
Setting selected values for ng-options bound select elements
If using AngularJS 1.2 you can use ‘track by’ to tell Angular how to compare objects. <select ng-model=”Choice.SelectedOption” ng-options=”choice.Name for choice in Choice.Options track by choice.ID”> </select> Updated fiddle http://jsfiddle.net/gFCzV/34/
How to ng-translate inside select box option in angularjs
You need to apply the filter to gender.name and not to the genders array: <select ng-model=”me.gender” ng-options=”gender.name | translate for gender in genders”></select> Here is a demo
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
How to set the first select option to always be blank
This will do the work for you: <select size=”3″ ng-model=”item” ng-options=”s.name for s in itemlist”> <option value=””>Select Option</option> </select>
ng-options with object data source
This is kind of strange, but it seems like you need to put a space after for. This works: <select ng-model=”type” ng-options=”k as v for (k, v) in types”> <option value=””>Select Type</option> </select>
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 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
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
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”, … };