Below is my select with ng-options:
<select ng-options="key as value for (key , value) in getList() ..."> </select>
The getList() function retrieves the following object:
{"CURRENT_ACCOUNT":"test1","ORDINARY_ACCOUNT":"test2"}
and if I inspect the generated options, it is the following:
<option label="test1" value="string:CURRENT_ACCOUNT" selected="selected">test1</option>
As you can see, everything seems right except the value attribute has a string: prefix.
How can I remove the prefix? What did I do wrong?
You didn't do anything wrong and your code is actually correct. This is how AngularJS creates the options.
<select ng-model="selected" ng-options="key as value for (key, value) in getList()"></select>
Selected: {{selected}}
If you print out the value of the selected item immediately following it, you'll noticed that the value is just CURRENT_ACCOUNT and not string:CURRENT_ACCOUNT as the option leads you to believe.
Here is a plunker demonstrating it.
https://next.plnkr.co/edit/lvEi6pknJZMh0wab?open=lib%2Fscript.js&deferRun=1
Related
I am diving directly on my problem:
On controller:
$scope.code = 1
$scope.codes [
{
"1":"Accepted"
"0":"Rejected"
}
On view:
<select ng-model="code" ng-options="key as value for (key,value) in codes track by key"></select>
Is there any way to have "Accepted" selected on my view ? I know that the $scope.code is not an object but I want to assign it the value passed by selected option (key).
For anyone who would like to reproduce my problem, I got a plunk made.
You are almost there, you just need to do minor changes:
Remove the track by statement like this:
<select ng-model="myVal" ng-options="key as val for (key,val) in data"></select>
And in $scope.myVal set the value as string because you are assigning an integer.
And that should work.
I wanted to pass array value in dropdown(select) value but it always shows array key in dropdown value.
I am trying code given below
$databases = array(
'db1','db2','db3','db4','db5',
);
Angular Code
<select ng-model="databases" ng-change="showTables($index)" ng-options="key as value for (key,value) in databases" >
<option value="">-- choose Database --</option>
ng-options is build like this :
ng-options="key as value for (key,value) in databases"
After the in, you have your list. Between for and in, it's the object that you will use for a single select.
Then you have 2 other attributes. Here it's key and value. Value is what you want to print in your list, what is visible for the user. Key is the data which will be put in your DOM as "value".
Here is you want to set your array attribute in your value. Because here you have a simple data, and you don't need any difference between what is visible in your list, and what is in your DOM value, you can do this :
ng-options="value for value in databases"
Moreover, I also notice that you use your variable databases on your ng-model. That's not a good idea, this will erase your list when you will select a value. You have to use an other var.
If the array contains only Strings, you can simply use ng-repeat:
Html:
<div ng-controller="DatabaseSelectExampleController as vm">
<select ng-model="vm.selectedDatabase">
<option ng-repeat="actDatabase in vm.databases" value="{{actDatabase}}">
{{actDatabase}}
</option>
</select>
</div>
JS:
angular.module('yourApp')
.controller('DatabaseSelectExampleController', function(){
this.databases = ['database one', 'someother db', 'a db aswell'];
this.selectedDatabase = this.databases[0];
});
I'm trying to figure out why the ng-model is not working with the ng-repeat.
There is my code:
$scope.availableCountries = [];
APIUtility.getCountries().then(function(data){
$scope.availableCountries = data;
$scope.filters.country = "AZ";
});
<select id="eventprice" class="searchpage_select" ng-model="filters.country">
<option value="all">show all</option>
<option ng-repeat="countries in availableCountries" value="{{countries.country_iso}}" ng-class="{'element_selected' : filters.country == countries.country_iso}">{{countries.name}}</option>
</select>
where:
availableCountries is an object from an API call (well formed, trust me)
$scope.filters is an object containing a lot of filters (including country)
The problem is that if i change the ng-model before or after the API call, the select statement is not updated, i think that if i update the scope before angular has the time to execute his ng-repeat, ng-model stop working and will not update the field.
i added the ng-class to prove that filters.country has the right value (ng-class statement returns true when needed and add the class in the right place, so filters.country contains the right value).
I don't know if i was clear enough. Thanks all for your time!
Use ng-options instead of an ng-repeat on an option field.
<select id="eventprice"
class="searchpage_select"
ng-model="filters.country"
ng-options="country.country_iso as country.name for country in availableCountries">
<option value="all">show all</option>
</select>
Problem is in
$scope.filters.country = "AZ";
Try this updated jsfiddle
http://jsfiddle.net/HB7LU/15021/
I am not getting how the ng-model are connected to the ng-repeat options. How can the code below be converted to an ng-repeat? I can get the ng-repeat work but
ng-selected="{{alternative.code == question.answer}}"
is what I don't understand how to do with the ng-options.
<select ng-model="question.answer">
<option ng-selected="{{alternative.code == question.answer}}"
ng-repeat="alternative in question.alternatives"
value="{{alternative.code}}">{{alternative.label}}</option>
</select>
Use the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for alternative in question.alternatives">
</select>
if question.alternatives is an array and the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for (key, alternative) in question.alternatives">
</select>
if it is an object. Both expressions start with the syntax value as label, which tells the <select> what to consider a value (to be bound to model) and what to use as a label (visible for users). The whole business with "this option has that value and is selected when model has it too" is then done automatically. See documentation.
<select ng-model="question.answer" ng-options="alt.code for alt in question.alternatives"></select>
modelValue as optionLabelValue for item in array if 'modelValue as' is ommited modelValue is considered as item object
I have an enum (I code using TypeScript):
export enum AddressType
{
NotSet = 0,
Home = 1,
Work = 2,
Headquarters = 3,
Custom = -1,
}
Then in my controller I have a field named type, into which I set the initial value that should be selected in the select input (I set it to AddressType.Headquarters).
Finally, in my HTML I put the following:
<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>
Everything seems to work fine except one thing: for some reason Angular does not select "3" (Headquarters) initially in the select after all bindings have been updated. Angular creates an extra option like this instead:
<option value="?" selected="selected"></option>
So for some reason Angular cannot figure the initial option to select in the combo.
If the user selects another option of the combo box, Ctrl.type is updated properly so the binding works fine for that part. Basically my problem is just that the option that should be selected initially is not selected as expected.
What am I missing here that is causing that problem?
Found the problem:
The array returned by Ctrl.getAddressTypes() was an array of strings:
["0", "1", "2", "3", "1"]
and what was stored in Ctrl.type was of type number.
AngularJS compares the array supplied to ng-options to the value supplied to ng-model using the '===' operator. 3 does not equal to "3" in that case - that's why it did not work.
I often run into this when using number id's. My way around this quirk is to add ''+ to convert it to string type:
<select ng-options="''+u.id as u.name for u in users"
In a function if the below code is added and the same is called from the ng-init then the issue is also getting resolved. This will resolve the string comparison issue.
$scope.Ctrl.type = "" + $scope.Ctrl.type + "";
I happens because you didn't initiated selected value. Try to set init value with ng-init:
<select ng-model="Ctrl.type"
ng-options="addressType for addressType in Ctrl.getAddressTypes()"
ng-init="Ctrl.type = ..."
></select>
See this Demo Fiddle where we have 2 combos with and without init value. You can see that one combo HTML seems like:
<select ng-model="selectedItem1"
ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">General</option>
<option value="1">Super</option>
<option value="2">Trial</option>
</select>
The proper one:
<select ng-model="selectedItem"
ng-options="selectedItem.name as selectedItem.name for selectedItem in values"
ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
<option value="0">General</option>
<option value="1" selected="selected">Super</option>
<option value="2">Trial</option>
</select>