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.
Related
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
I have an input with [disabled] depending upon the ngModel of another input. Initially [disabled] is working properly but not when we change the dependant input value, the [disabled] property is not working. How to apply two binding on [disabled] property?
Following is the code snippet.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
This model isDisabled is changed correctly. I could see the value change like this in template {{isDisabled}}. But not reflected in the [disabled] property of the select box.
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
The primary problem was you were using same value 0 for both option. But even if you change them to 1 & 0 respectively for Enable & Disable. It will not gonna work because value attribute stores values as '0'(string '0') & '1'(string 1) (in short stringify value of it).
You could easily solve this dataType issue of value by using ngValue attribute binding.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option [ngValue]="1">Disabled</option>
<option [ngValue]="0">Enabled</option>
</select>
Plunker Demo
you need to add a name attribute to the input and make the ng-mode two-way binding by wrapping up with parenthesis also. no need to use the ngModelChange for this purpose
<select [(ngModel)]="isDisabled" name='isDisabled'>
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
<option value="test">Test</option>
</select>
In your question, both option values are 0.
You'll want to ensure that one is true, with the other being false
Component:
component class {
myVar = false
}
Template:
<select [(ngModel)]="myVar">
<option value="true">...</option
<option value="false">...</option
</select>
<select [disabled]="myVar">
<option>...</option
</select>
Try to use true\false for [disabled] it will save your function comparator, and use 2-way binding directly.
Like:
<select [(ngModel)]="isDisabled">
<option value="true">Disabled</option>
<option value="false">Enabled</option>
</select>
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
See Plunker
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 an angularjs dropdownlist using ng-options
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
My dropdown list loads fine but the selected option 0 is empty and i want to replace it with "Please Select One"
<option value="?" selected="selected"></option>
How do i do this? All the examples i have seen online doesnt seem to work.
Thanks
In the angular documentation for select it states
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
Which means you can do this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-init="arr=[1,2,3]">
<select ng-model="val" ng-options="x for x in arr">
<option value="">Please select an option</option>
</select>
<br>
Val: {{val}}
</div>
</div>
Initialize $scope.locationDropdown = 'Please Select One' as default
or
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
<option> Please Select One </option>
</select>