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

Question

我想在angularjs中使用select 。 我有一个json，每个元素都有2部分： name和value 。 我想在下拉列表中显示name ，当用户选择主题之一时， value将复制到ng-model 。

$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];

为此，我有2种使用方式：

1. ng-options ：

我使用ng-options如下所示：

<select ng-model="model.test" ng-options="element.name for element in list"></select>

这是正常工作，但是当我选择每个元素的，我只想value元素是副本NG-模型，而是一个JSON是副本NG-模型，如下图所示：

$scope.model.test = {name:"element1",value:1}

我可以在角度控制器中解决此问题，但我想找到解决此问题的更好方法。

为了解决这个问题，我使用第二种方法：

2.在options ng-repeat ：

    <select ng-model="model.test">
      <option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
    </select>

在第二种方法中，将value复制到ng-model，但是作为字符串类型：

$scope.model.test = "10";

我使用以下代码，但是所有代码都将字符串值返回给模型。

<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>

如何解决这个问题？

Answer 1

您是否尝试过：

 <select ng-model="model.test" ng-options="element.value element.name for element in list"></select>

顺便说一句，如果您的列表中可能有数百条记录，则应创建自己的指令，在该指令中，您可以使用简单的JavaScript for循环来操作DOM

ng-repeat的渲染速度很慢，ng-options将每条记录添加到$ watch中。

Answer 2

您也可以使用ng-options解决它

      ng-options="element.value as element.name for element in list"

请阅读此博客以了解有关ng-options的更多信息。

ng-options的另一个优点是，如果要将所选对象附加到ng-model，它将绑定对象而不是json字符串。