ng-repeat vs ng-options, qui est le meilleur pour moi

j'ai pour afficher les données JSON dans la liste déroulante ,pour que j'ai deux options, l'une des options est d'utiliser ng-repeat et un autre ng-options.

ng-repeat code :

dans le fichier html :

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

et dans le fichier de script:

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

et d'autres un ng-options :

dans le fichier html :

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

dans le fichier de script:

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

Maintenant, je veux savoir qui est le mieux pour mon projet d'amélioration de la performance .Les lignes directrices s'il vous plaît .

Je pense que ng-options, parce que c'est destiné à être utilisé dans les cas de ce genre.
Merci @Mritunjay
Je n'ai pas posté comme une réponse si vous voulez je peux.\
oui s'il vous plaît ,veuillez fournir je suis en attente de réponse @Mritunjay
est-il assez "destiné à être utilisé dans des cas comme ça?"

OriginalL'auteur Shekkar | 2014-06-30

  1. 1

    Je pense que ng-options, parce que c'est destiné à être utilisé dans les cas de ce genre.

    Angularjs Docs:-

    ngOptions fournit un itérateur installation de l'élément qui doit être utilisé au lieu de ngRepeat lorsque vous voulez sélectionner un modèle d'être lié à une non-valeur de chaîne. C'est parce qu'un élément ne peut être lié à des valeurs de chaîne à l'heure actuelle.

    OriginalL'auteur Mritunjay

  2. 1

    Autant que la performance est considéré, je pense que vous devriez utiliser votre propre directive, qui s'en occupera.

    ng-options met chaque élément $watch => devient vraiment lent si la liste contient des centaines d'éléments

    ng-repeat sera lente à être rendus.

    Vous devez ensuite vous préférez utiliser votre propre directive, et de construire votre html en elle

    OriginalL'auteur Deblaton Jean-Philippe

  3. 0

    Le code ci-dessous (également dans Plunker) ne présente pas de différence, même lorsque le modèle est lié à une non-valeur de chaîne (arithmétique code) sauf pour l'initialisation, où l'approche avec ng-repeat ne parvient pas à afficher la valeur par défaut (ou peut-être il y a une solution pour ça aussi). Après une valeur est choisie, le comportement est le même:

    <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>

    OriginalL'auteur Marcus Junius Brutus