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种方法可以使用select：

ng-options：

我使用ng-options，如下所示：

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

它正常工作，但是当我选择每个元素时，我希望只有value元素复制到ng-model，但是json是复制到ng-model，如下所示：< / p>

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

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

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

2. ng-repeat中使用options：

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

第二种方式，只是将值复制到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循环来操作你的DOM

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

Answer 2

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

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

请阅读this blog以了解有关ng-options的更多信息。

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

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

2 个答案: