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?
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.