在选择中使用ng-options或ng-repeat？

Question

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:

1. 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?

Answer 1

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.

Answer 2

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.