在選擇中使用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字符串。