I have a select being rendered inside of an agGrid. Nothing exceptionally complicated.
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
ng-options="item.stdPayerClass for item in vm.payerClassList track by item.id">
</select>
The crazy thing is this; I keep getting the missing value option:
<option value="?" selected="selected"></option>
Even though the value of data.stdPayerClassFnbr exists in the list of rendered options:
<option value="1" label="TBD">TBD</option>
The underlying data type of both data.stdPayerClassFnbr and item.id is int; however I've tried making them both string by executing a map against their values before binding them. That did not help. I've got to be configuring this select wrong.
I've also tried the ng-repeat approach:
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%">
<option ng-repeat="item in vm.payerClassList" value="{{item.id}}">{{item.stdPayerClass}}</option>
</select>
This did not help either.
Make sure your stdPayerClassFnbr model object has the same properties as the payerClassList[x] items. Especially properties id and stdPayerClass
I found the issue. It was the track by expression. Since I was binding to an array of objects that came back from a lookup, when selecting or looking for a value, it was looking for the entire object by reference. Removing the track by expression caused the binding to work directly on the numeric value:
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
ng-options="item.id as item.stdPayerClass for item in vm.payerClassList">
</select>
This generates a very different list of options:
<option value="number:1" label="TBD" selected="selected">TBD</option>
I hope this helps somebody in the future! It may even help me one day!
Related
I am trying to take value of one expression to another as below:
<label class="col-md-12" ng-repeat="a in filters"> {{a.label}}
<select ng-model="qqq">
<option ng-repeat="f in values " ng-value="{{f.{{a.label}}}}" >
{{f.{{a.label}}}}
</option>
</select>
</label>
I know that not the correct way but just to explain the question exactly I wrote that. Also both Values and filters are two different and independent json objects, So suppose if
{{a.label}}= manufacture
then
{{f.{{a.label}}}} = {{f.manufacture}}
and both the object doesn't have any common attributes
You can use bracket notation to access property like {{f[a.label]}}.
I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";
I am using ng-repeat on option in select.
<select ng-model="mymodel">
<option ng-repeat="p in persons" value="{{p.id}}">{{p.name}}</option>
</select>
$scope.persons= [
{id:1,name:"tester11"},
{id:2,name:'tester22'},
{id:3,name:'tester33'},
{id:4,name:'tester44'}
];
How can I make an option selectable means by default "tester33" should be selected
through use of ng-model.
I know it is achievable through ng-options. But I want to try this one.
Thanks in advance.
There is no perfect way to achieve this using ng-repeat, but here's a workaround:
<select ng-model="mymodel">
<option ng-repeat="p in persons" ng-selected="p.name=='tester33'" value="{{p.id}}">{{p.name}}</option>
</select>
This just sets the option with name='tester33' but the model won't get updated until the user changes select value explicitly
NOTE: This is not a recommended way, you must use ng-options for complete functionality
I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.
I've been trying to figure out how to set this particularly select like this:
<select name="ddlStatus" id="ddlStatus" class="form-control" ng-model="status" ng- change="onChangeStatus()">
<option ng-repeat="status in orderStatus" value="{{ status.ID }}">{{ status.Name }} </option>
</select>
How can i set is without ng-repeat and insted using ng-options? Ive tried a lot of solution but nothing solves it like this way i show above..
You can use as in ng-options:
<select ng-model="status" ng-options="status.ID as status.Name for status in orderStatus"></select>
Alternatively, angular seems smart enough to use the whole status object as the value even when you specify some sub-field like name as its label.
<select ng-model="status" ng-options="status.Name for status in orderStatus"></select>
Demo: http://jsfiddle.net/4ApFG/1/
You can use the whole model as the value like:
<select ng-options="status.Name for status in orderStatus" ng-model="status">
</select>
That way you can just get the selected id over status.ID. Angular will handle the value model linking stuff for you.
Or of course the id is also possible. Although at least for me it seems to be a bit confusing because you will have the array index in the generated html and the id as the actual value.
<select ng-options="status.ID as status.Name for status in orderStatus" ng-model="status">
</select>
Additionally asigning the whole model to status makes a lot more sense than just the id.