ng-repeat vs ng-Optionen, die für mich am besten ist

habe ich die Anzeige der JSON-Daten in der Dropdown-Liste ,dafür habe ich zwei Optionen eine der Optionen ist Durch die Verwendung von ng-repeat und andere ng-Optionen.

ng-repeat-code :

in der html-Datei :

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

sowie in der Skript-Datei:

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

und andere ng-Optionen :

in der html-Datei :

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

in der Skript-Datei:

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

Nun möchte ich wissen, welches am besten für mein Projekt um die Leistung zu verbessern .Richtlinien bitte .

Ich denke, dass ng-Optionen, weil das ist, dazu genutzt werden, um in Fällen wie diesem.
Danke @Mritunjay
Ich habe nicht geschrieben es als Antwort, wenn Sie wollen, kann ich.\
ja ,bitte, bitte ich warte auf Antwort @Mritunjay
ist es genug "dazu genutzt werden, um in Fällen wie diesem" ?

InformationsquelleAutor Shekkar | 2014-06-30

  1. 1

    Ich denke, dass ng-Optionen, weil das ist, dazu genutzt werden, um in Fällen wie diesem.

    Angularjs Docs:-

    ngOptions liefert einen iterator Anlage für das element, das verwendet werden soll, statt der ngRepeat, wenn Sie möchten, dass der wählen Sie Modell gebunden zu sein, um ein nicht-string-Wert. Dies ist da eine option-element kann nur gebunden werden string-Werte zu präsentieren.

    InformationsquelleAutor Mritunjay

  2. 1

    So weit als Leistung angesehen wird, ich denke, Sie sollten Ihren eigenen Richtlinie behandelt.

    ng-Optionen setzt jedes element in $Uhr => bekommt wirklich langsam, wenn die Liste enthält mehrere Elemente

    ng-repeat wird langsam gerendert werden.

    Sollten Sie dann lieber mit Ihrer eigenen Richtlinie, und bauen Sie Ihre html-Code in die

    InformationsquelleAutor Deblaton Jean-Philippe

  3. 0

    Den code unten ein (auch in Plunker) zeigt keinen Unterschied, auch wenn das Modell gebunden ist, ein nicht-string-Wert (arithmetischer code) außer für die Initialisierung, wo der Umgang mit ng-repeat nicht angezeigt der Standardwert (oder vielleicht gibt es einen workaround für, als auch). Nachdem ein Wert ausgewählt wird, das Verhalten ist das gleiche:

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

    InformationsquelleAutor Marcus Junius Brutus

Schreibe einen Kommentar