How can you sort the options in a {select} like this:
<select ng-options="value as name for (value,name) in vm.options" ng-model="vm.selected">
when vm.options is an object (I want to sort by values)?
Context: At some point I needed to add an explicit empty option "" as a valid value. I'd love it to be the first one on the list, but due to how objects work in Javascript I can't get it to cooperate.
You can achieve in the following way
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected"></select>
and if you want to add empty option like 'Select' then
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected">
<option value="" selected>Select</option>
</select>
Please also refer following link
'orderBy' in AngularJs
Related
I have seen a lot of examples to bind array of Objects.
But, all I have is this
years = [1900,1901,1902];
and i want to bind this to the options for my select control.
I have this template:
<select id="carYear" required>
<option value="">Select year</option>
<option ngFor="year in years">{{year}}</option>
</select>
But, it does not work.
I also tried ng-repeat. Any ideas what is wrong here?
Fiddle here:
https://jsfiddle.net/frishi/bzbbo5da/
Basically, you can use a flat array and enumerate it using a <select>
The only additional thing you need to do is
<select ng-model="myYears" ng-options="o as o for o in years"></select>
When you use a flat array, you have to tell angular what to use as the key. Angular will do it for you if you use an array of objects.
You're missing an asterisk on the ngFor directive and the let keyword.
Try:
<select id="carYear" required>
<option value="">Select year</option>
<option *ngFor="let year in years">{{year}}</option>
</select>
Could someone please help explain why the first and last select do not show the default value?
angular.module('myApp', []);
angular.bootstrap(document.documentElement, ['myApp']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-init="options=[{id: false, label: 'False'}, {id: true, label: 'True'}]"></div>
<select ng-init="myVar=false" ng-model="myVar" >
<option ng-value="false">False</option>
<option ng-value="true">True</option>
</select>
<select ng-init="myVar2=false" ng-model="myVar2" ng-options="option.id as option.label for option in options">
</select>
<select ng-init="myVar3=false" ng-model="myVar3" ng-options="option.id as option.label for option in options track by option.id">
</select>
To paraphrase from the ngOptions documentation page:
In both examples, the track by expression is applied successfully to each option in the options array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. When the ngModel value is options[0] and the track by expression evaluates to options[0].id there is no issue. When the ngModel value is options[0].label and the track by expression evaluates to options[0].label.id (which is undefined). As a result, the model value is not matched against any <option> and the <select> appears as having no selected value.
I can set a dropdown list with default value in angularjs as,
<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
<option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
</select>
How can I achieve the same using ng-options? I treid with,
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = option.id"
ng-options="option.name for option in data track by option.id">
</select>
But no use. Sample fiddle is here
Use ng-init to set default value for ng-options.
Here is the: demo
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0].id"
ng-options="option.id as option.name for option in data">
</select>
All this miss use of ng-init.
From the angular docs:
This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.
Source docs
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. If your data array is from an ajax request, just assign it once you have the data.
.controller('test', ['$scope', function ($scope) {
$scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
$scope.repeatSelect= $scope.data[0];
}]);
There is one caveat to note. If you employ the as key word in your expression you have to assign your ng-model with the actual property your telling it to select.
See full fiddle demoing both: http://jsfiddle.net/kb99gee8/
i have acheieved what you need using your code and ng-options like you mentioned, here is Working Fiddle
Full CODE
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect">Angular select:</label>
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0]"
ng-options="option.name for option in data track by option.id">
</select>
</form>
<br/> <tt>Selected value: {{repeatSelect.id}}</tt>
</div>
</div>
<br/>
I will suggest an example
HTML part
<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select>
In my controller
$scope.data = {selectedOption: $scope.venueNamelists[i].name};
the model value should equal to the key,value pair in the venueNamelists.
I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.
<select ng-model='signup.user["country_code"]'>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.
<select>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
Here is a snippet from my controller however I doubt it's that useful for solving this issue.
signup.user = {};
countryCodes.success(function(data) {
signup.country = data;
});
So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:
signup.user = {country_code: 840};
HTML:
<select ng-model="signup.user.country_code"
ng-options="country['country-code'] as country.name for country in signup.country">
</select>
I have following code.
<select id="block-rule"
class="form-control"
name="rule"
ng-model="forms.block.fields.rule">
<option ng-repeat="(key, value) in rules" value="{{key}}">{{value}}</option>
</select>
I'm not really familiar with AngularJS, but I can see, that it should iterate "rules" (as specified in ng-repeat), and it works right.
Thing that don't work - default value is not selected. As I can see, value that should be selected initially is need to be passed to ng-model.
forms.block.fields.rule, I think, contains a value, but I need to get a key.
Unfortunately, it's the only part of code I can show.
<select ng-options="key as value for (key,value) in rules" ng-model="forms.block.fields.rule">
DEMO FIDDLE
You can use ng-options but it may require you to change your rule model slightly (add a name property):
<select id="block-rule"
class="form-control"
name="rule"
ng- model="forms.block.fields.rule"
ng-options="rule as rule.name for rule in rules"
>
</select>