Question

我必须在下拉列表中显示JSON数据，因为我有两个选项，其中一个选项是使用ng-repeat而另一个是ng-options。

ng-repeat code：

在html文件中：

<select>
<option ng-repeat="prod in testAccounts" value="{{prod.id}}">{{prod.name}}</option>
</select>

并在脚本文件中：

$http.get('document.json').success(function (data) 
{
    $scope.testAccounts = angular.fromJson(data);
 }

和其他一个ng-options：

在html文件中：

<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts1"></select>

脚本文件中的

：

$http.get('document.json').success(function (data) 
{
    $scope.testAccounts1 = data;
    $scope.selectedTestAccount = $scope.testAccounts1[0];
}

现在我想知道哪一个最适合我的项目以提高性能。请指导。

Answer 1

我认为ng-options，因为它意味着在这种情况下使用。

Angularjs Docs： -

ngOptions为元素提供迭代器工具，当您希望将选择模型绑定到非字符串值时，应使用该工具代替ngRepeat。这是因为选项元素目前只能绑定到字符串值。

Answer 2

就性能而言，我认为您应该使用自己的指令来处理它。

ng-options将每个元素放入$ watch =＆gt;如果列表包含数百个元素

，则会变得非常慢

ng-repeat的渲染速度很慢。

然后您应该更喜欢使用自己的指令，并将html构建到其中

Answer 3

下面的代码（也在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>

ng-repeat vs ng-options对我来说最好

3 个答案: