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/
Related
I have the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.
What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.
Any input is appreciated!
<div ng-repeat="optionType in productDetailModel.OptionTypes">
<select name="{{optionType.OptionTypeName}}">
<option ng-repeat="option in optionType.Options"
value="{{option.OptionValue}}">{{option.OptionValue}}
</option>
</select>
</div>
Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview
The initial option is blank because the model is initially undefined.
As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.
$scope.modelName = $scope.optionType.Options[0];
It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.
<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options">
</select>
This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.
Hope this helps.
Use ng-options when using a select!
<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>
And then set the ngModel to the default option you want selected:
$scope.someModel = $scope.optionType.Options[0]
There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.
$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object
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 trying to bind 2 properties to a object. The DocumentTypeId, DocumentTypeName. I am using ng-repeat in a select box, i could not get it to work with ng-options. This hack is causing me problems. I have ngstorage setup in my project, I can get the DocumentTypeName from the $rootScope, problem is I cant execute the function correctly.The parameter in the ng-change function is undefined. I would prefer to get rid of the hack and use ng-options, if not then I just need this to work. open to suggestions, thanks
plunker
<select class="form-control" ng-model="model.documentTypeId" ng-change="selectDocumentType(docType)">
<option ng-repeat="docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</option>
</select>
I've made it work with ng-options, like you said, it's best if you used that instead of a hack.
<select class="form-control" ng-model="model.documentTypeId" ng-change="test()"
ng-options="docType.DocumentTypeId as docType.DocumentTypeName for docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</select>
And the ng-change is just a test function in the controller so you see it works:
$scope.test = function (docType) {
console.log($scope.model.documentTypeId);
};
Working Plunker
I want use select in angularjs.
I have a json that every element have 2 part: name and value. I want show name in dropdown and when user select one of theme, value is copy to ng-model.
$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];
For this I have 2 way to use select:
ng-options:
I use ng-options like below:
<select ng-model="model.test" ng-options="element.name for element in list"></select>
It's work correctly, but when I select each of element, I want just value of element is copy to ng-model, but a json is copy to ng-model, like below:
$scope.model.test = {name:"element1",value:1}
I can resolve this problem in angular controller, but I want find a better way that resolve this problem.
For resolove this problem, I use second way:
2.use ng-repeat in options:
<select ng-model="model.test">
<option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
</select>
In second way, just value is copy to ng-model, but as a string type:
$scope.model.test = "10";
I use below code, but all of them return a string value to model.
<option ng-repeat="element in list" value={{element.value}}>{{element.name}}</option>
<option ng-repeat="element in list" value="{{element.value}}|number:0">{{element.name}}</option>
<option ng-repeat="element in list" value={{element.value}}|number:0>{{element.name}}</option>
How can fix this problem?
you can resolve it with ng-options as well
ng-options="element.value as element.name for element in list"
please read this blog to understand more about ng-options.
Also another advantage of ng-options is, it binds the object as opposed to json string in case you want to attach the selected object to ng-model.
Have you tried this :
<select ng-model="model.test" ng-options="element.value element.name for element in list"></select>
btw, if you may have hundreds of records into your list, you should create your own directive, where you would manipulate your DOM with a simple javascript for loop
ng-repeat will be slow to be rendered,
ng-options adds every record into $watch.
I want to add an html select with options AM,PM with angularjs,
what i need is having the key and the value of the option be the same :
<option value="AM">AM</option>
<option value="PM">PM</option>
My html looks like this
<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>
and my controller looks like
$scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
$scope.ampms ={"AM":"AM","PM":"PM"};
and every thing working fine.
My question is why i cant have the same thing when i used an array (i tried all the options in the ng-options)
as this
$scope.ampms =["AM","PM"];
what ever i do i always get this
<option value="0">AM</option>
<option value="1">PM</option>
What i want is using an array like above with the option has the key and the value the same.
With AngularJS, you don't need to worry about what the value of the option is. All the selects I've seen with ng-options have values of 0 through whatever. If you're just looking for a dropdown with the two options, it can be as simple as
<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>
See http://jsfiddle.net/EyBVN/1/
This is is a default behavior of ng-options in Angular. If you do not specify a key name, angular will automatically choose to use the index rather than a key. The code that does that can be seen on line 405 in /src/ng/directives/select.js on Angular's Github repository.
It can't even be forced by "value as value for (index, value) in values".
But as dnc253 just beat me to the punch with his answer (it showed up while I was typing)... you don't have to worry about it, Angular does it all for you automatically.
I did find a way to place specific data in the value of the options for a select. You have to add an ng-repeat attribute to the option tag inside the select tag:
<select id="{{question.id}}" name="{{question.id}}"
class="{{question.inputclass}}" ng-required="question.required"
title="{{question.title}}">
<option value=""></option>
<optgroup ng-repeat="group in question.data" label="{{group.group}}">
<option ng-repeat="item in group.data" value="{{item.value}}"
ng-selected="{{item.value == question.defaultValue}}">
{{item.description}}
</option>
</optgroup>
</select>
As a bonus, I left the option group tags in place to serve as an example for everyone.
The question.data JSON is:
[
{"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
{"value":"Quebec","description":"Quebec City"},
{"value":"Manitoba","description":"Winnipeg"}
]
},
{"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
{"value":"Nayarit","description":"Tepic"}
]
},
{"group":"United States of America","data":[
{"value":"Alabama","description":"Montgomery"},
{"value":"Georgia","description":"Atlanta"},
{"value":"Mississippi","description":"Jackson"},
{"value":"Louisiana","description":"Baton Rouge"},
{"value":"Texas","description":"Ausint"}
]
}
]