javascript ng-repeat 与 ng-options 哪个最适合我
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24483903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-repeat vs ng-options which is best for me
提问by Shekkar
i have to display the JSON data in drop down list ,for that i have two options one of the options is By using ng-repeat and other one is ng-options.
我必须在下拉列表中显示 JSON 数据，为此我有两个选项，其中一个选项是使用 ng-repeat，另一个是 ng-options。
ng-repeat code :
ng-重复代码：
in html file :
在 html 文件中：
<select>
<option ng-repeat="prod in testAccounts" value="{{prod.id}}">{{prod.name}}</option>
</select>
and in script file:
并在脚本文件中：
$http.get('document.json').success(function (data)
{
$scope.testAccounts = angular.fromJson(data);
}
and other one ng-options :
和其他一个 ng-options ：
in html file :
在 html 文件中：
<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts1"></select>
in script file:
在脚本文件中：
$http.get('document.json').success(function (data)
{
$scope.testAccounts1 = data;
$scope.selectedTestAccount = $scope.testAccounts1[0];
}
Now i want to know which one is best for my project to improve the performance .Any guidelines please .
现在我想知道哪一个最适合我的项目来提高性能。请提供任何指导。
采纳答案by Mritunjay
I think that ng-options, because that is meant to be used in cases like this.
我认为 ng-options，因为这意味着在这样的情况下使用。
ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.
ngOptions 为元素提供了一个迭代器工具，当您希望选择模型绑定到非字符串值时，应该使用它而不是 ngRepeat。这是因为选项元素目前只能绑定到字符串值。
回答by Deblaton Jean-Philippe
As far as performance is regarded, I think you should use your own directive that will handle it.
就性能而言，我认为您应该使用自己的指令来处理它。
ng-options puts every element in $watch => gets really slow if the list contains hundreds elements
ng-options 将每个元素放入 $watch => 如果列表包含数百个元素会变得非常慢
ng-repeat will be slow to be rendered.
ng-repeat 的渲染速度会很慢。
You should then prefer using your own directive, and build your html into it
然后你应该更喜欢使用你自己的指令，并将你的 html 构建到其中
回答by Marcus Junius Brutus
The code below (also in Plunker) shows no difference even when the model is bound to a non-string value (an arithmetic code) exceptfor the initialization where the approach with ng-repeatfails to display the default value (or maybe there's a workaround for that as well). After a value is chosen the behavior is the same:
下面的代码（也在Plunker 中）显示没有区别，即使模型绑定到非字符串值（算术代码），除了初始化方法ng-repeat无法显示默认值（或者可能有解决方法）同样）。选择一个值后，行为是相同的：
<html>
<head>
<title>making choices </title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
</head>
<body ng-app='theApp' ng-controller='TheController as ctl'>
<div ng-controller='TheController as ctl'>
Select your favorite fruit:
<select ng-model='ctl.selectedFruitCode'>
<option ng-repeat='fruit in ctl.fruits' ng-value='fruit.code'>{{fruit.label}}</option>
</select>
<br/>
Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
</div>
<hr>
<div ng-controller='TheController as ctl'>
Select your favorite fruit:
<select ng-model='ctl.selectedFruitCode'
ng-options='c.code as c.label for c in ctl.fruits'>
</select>
<br/>
Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
</div>
<script type='text/javascript'>
angular.module('theApp', [])
.controller('TheController', [function() {
var self = this;
self.fruits = {};
self.fruits = [{label: 'Apples' , code:0},
{label: 'Bananas' , code:1},
{label: 'Peach' , code:2},
{label: 'Apricot' , code:3}];
self.selectedFruitCode = self.fruits[0].code;
self.getSelectedFruit = function() {
for (var i = 0 ; i < self.fruits.length ; i++) {
if (self.fruits[i].code==self.selectedFruitCode)
return self.fruits[i];
}
};
}]);
</script>
</body>
</html>
