ng-repeat vs ng-options, что лучше для меня

я должен отображать данные JSON в раскрывающемся списке, для этого у меня есть два варианта: один из вариантов — с помощью ng-repeat, а другой — ng-options.

ng-повторить код:

в 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];
}

Теперь я хочу знать, какой из них лучше всего подходит для моего проекта, чтобы улучшить производительность. Любые рекомендации, пожалуйста.


javascript json angularjs angularjs-ng-repeat angularjs-ng-options
person Shekkar    schedule 30.06.2014    source источник
comment
Я думаю, что ng-options, потому что они предназначены для использования в подобных случаях.   -  person Mritunjay    schedule 30.06.2014
comment
Я не публиковал это как ответ, если хотите, я могу. \   -  person Mritunjay    schedule 30.06.2014
comment
да, пожалуйста, предоставьте, я жду ответа @Mritunjay   -  person Shekkar    schedule 30.06.2014
comment
достаточно ли предназначено для использования в таких случаях?   -  person Reyraa    schedule 01.12.2014

Ответы (3)


arrow_upward
1
arrow_downward

Я думаю, что ng-options, потому что они предназначены для использования в подобных случаях.

Документация по Angularjs: -

ngOptions предоставляет средство итератора для элемента, которое следует использовать вместо ngRepeat, если вы хотите, чтобы выбранная модель была привязана к нестроковому значению. Это связано с тем, что в настоящее время элемент option может быть привязан только к строковым значениям.

person Mritunjay    schedule 30.06.2014

arrow_upward
1
arrow_downward

Что касается производительности, я думаю, вы должны использовать свою собственную директиву, которая справится с этим.

ng-options помещает каждый элемент в $watch => становится очень медленным, если список содержит сотни элементов

ng-repeat будет отображаться медленно.

Затем вы должны предпочесть использовать свою собственную директиву и встроить в нее свой html.

person Deblaton Jean-Philippe    schedule 04.12.2014

arrow_upward
0
arrow_downward

Код ниже (также в 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>
person Marcus Junius Brutus    schedule 12.10.2015