I am trying a very simple thing angular select ng-options binding I only intend to Bind the value and a service will populate the value into my model. the problem is the drop down not selecting the correct item
<pre>
<select class=" form-control" ng-model="Incident.Language"
ng-options="lan.Value as lan.Label for lan in model.DomainData['Language'].FieldValues">
<option value="0">--Select--</option>
</select>
</pre>
Figured it out. Our Service returns the data with Incident.Language as Integer and when binding value is string so the equality was failing
Related
<div class="filter-box">
<select ng-model="$ctrl.customModel"
ng-options= 'option.id as option.name for option in transactionstatusList'
ng-change="transactionStatusChange()">
<option value="" selected="selected">No Search</option>
</select>
</div>
I am using angularjs ng-options to show data in select box but in option i have one hard-coded value is No-search how to show that value select at first because when data comes dynamically it shows first value from the data
Your code should work well if you have undefined customModel.
$scope.customModel;
Demo 1
However, if $scope.customModel is predefined, after async call, selected option jumps regards to ng-model
Demo 2
I want to bind a model value to selected item
<select id="hours" ng-model="v.T_Hour">
<option ng-repeat="n in [].constructor(24) track by $index" ng-selected="{{$index==v.T_Hour}}" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option>
</select>
I want after the page loads , the value of the model 'v.T_Hour' to be selected in select , i assign the value of the model in the controller, when i view the resulting HTML i see that the value is selected in the HTML code ,but not selected in the select control , and the select control displays an empty item.
Try this
<select
name="name"
id="id"
ng-options="option.name for option in v.data track by option.value"
ng-model="v.selected"
class="form-control inline-forms">
<option value="" selected>{{placeHolder}}</option>
</select>
and in controller
$scope.v = {data:[], selected:{}, placeHolder:""}
$scope.v.data = [{name:"nameOne", value:"valueOne"},{name:"nameTwo", value:"valueTwo"},{name:"nameThree", value:"valueThree"}]
$scope.v.selected = $scope.v.data[0]
$scope.v.placeHolder = "Click to Select"
According Angular documentation ngOption is better way to go than ngRepeat:
Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
more flexibility in how the 's model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually
Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.
see: https://docs.angularjs.org/api/ng/directive/select
I have this select in AngularJS:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
I like to save both values in scope, but I only save one value.
Any form to save both values?
Thanks!!!
If you want the entire value to be bound to ng-model than you can simply omit the select portion of your ng-options expression.
In this case, it's the item.id part.
data-ng-options="item.valor for item in arguments.objects"
This will ensure the entire item is bound to your ng-model when selecting.
I am assuming you want a multiple select. Have you tried using the attribute multiple:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" multiple="true" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
http://plnkr.co/edit/JVMZqnY5Vilek4NxDNGE?p=preview
There is a select like this (nothing unusual here):
<select ng-model="model.selectedValue"
ng-options="value.id as value.value for value in modelOptions">
<option value="" ng-if="!model.selectedValue">Null</option>
Initially the model is null, so when the page first opens the Null option is selected.
$scope.model ={"selectedValue":null};
However, if I then change the selected value to something else, and then back to null by clicking these two buttons
<button ng-click="model.selectedValue=1">Select Yes</button>
<button ng-click="model.selectedValue=null">Select Null</button>
then the Null option is NOT selected - so now the UI is out of sync with the model.
Clearly this is a bug with Angular (1.2.22), but is there any workaround?
Change the ng-if to ng-show:
<option value="" ng-show="!model.selectedValue">Null</option>
This is because ng-if creates a new scope, so you could also use ng-if along side $parent:
<option value="" ng-if="!$parent.model.selectedValue">Null</option>
I have got an answer from the Angular team at https://github.com/angular/angular.js/issues/8670.
This was actually working up to version 1.2.14 but they don't think it's a bug. Apparently the right thing to do is not use the ng-if inside the select, and instead work with the model, the Javascript array of options the select is binding to.
I assume for the code sample in the question, this means setting up a watcher on model.selectedValue and adding/removing a Null option to/from modelOptions as appropriate.
I have a drop down bound to ng-options (which uses an array of objects)
and ng-bind (which uses a string). This doesn't work because object comparison fails. Is there a workaround for this?
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name for a in dropdowns.gender">
</select>
Thanks
If I'm not mistaken what you want is to bind the name property to the person.gender property of the $scope. What you need to do is:
<select class="form-control"
ng-model="Person.Gender"
ng-options="a.name as a.name for a in dropdowns.gender">
</select>
The first part defines what is actually stored in the ng-model and the second part how is going to display, in this case both displayed value and model value are the same.
Working fiddle: jsfiddle