Wie X einen Wert in angularJS bekommt

Question

Ich bin neu bei angular.js und arbeite gerade an einer Funktion ng-repeat. in dem ich ng-repeat="x in name" benutze, wo ich einige Werte in names definiert habe, aber ich habe x nirgends im vollständigen Code definiert.

Hier ist mein Code:

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul> 
    <li ng-repeat="x in names"> 
    {{ x.name + ', ' + x.country }} 
    </li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []).controller('namesCtrl', function($scope) { 
    $scope.names = [ 
     {name:'Jani',country:'Norway'}, 
     {name:'Hege',country:'Sweden'}, 
     {name:'Kai',country:'Denmark'} 
    ]; 
}); 
</script> 

Alles funktioniert gut, aber ich frage mich, wie die Werte in x kommen oder was genau ng-repeat tun hier, wie ich x nur nenne aber keinen Wert in x definieren .

Answer 1

x wird durch winkel ng-repeat Direktive definiert. Es wird über alle Werte in names iteriert und jeder Wert wiederum an x gebunden.

Beachten Sie, dass Sie anstelle von x einen anderen gültigen Variablennamen auswählen können.

Der Grund, warum es keinen Konflikt zwischen jedem Wert von x gibt, ist, dass jede Iteration ihre eigene $scope erhält.

Siehe auch die ng-repeat documentation.

Answer 2

Ich ging den Code git-hub ng-repeat.js

Ng-repeat Werke zu sehen, durch den Verweis auf die Sammlung zu beobachten, dass wir diesen Code angegeben verwenden, die jede Eigenschaft ignorieren, die mit einem $ beginnt.

 for (var itemKey in collection) { 
     if (hasOwnProperty.call(collection, itemKey) && itemKey.charAt(0) !== '$') { 
      collectionKeys.push(itemKey); 
     } 
    } 

und während der Kompilierung dies geschieht: Am Ende

var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/); 

dies trennt die Worte in Ihrem ng-Wiederholungswert in ETWAS in COLLECTION und eventuell mit etwas TRACKBY. So wird eine Variable innerhalb der ngRepeat-Direktive erstellt, um über unsere Sammlung, die mit einer watchCollection-Uhr angesehen wird, zu iterieren.

Das SOMETHING wird im Rahmen der ngRepeat-Direktive definiert. Die COLLECTION wird tatsächlich eine Referenz aus dem Benutzer $ scope sein. Sie können fast jeden gewünschten Namen für ETWAS, aber nicht für die Sammlung auswählen.

Answer 3

ng-repeat wird über Ihre names Array iterieren. Jedes Objekt, über das es iteriert, wird durch den Namen dargestellt, den Sie ihm in Ihrer Vorlage geben - in Ihrem Fall - x. Sie können jedem beliebigen Namen einen Namen geben, der ein Objekt aus dem ausgewählten Array darstellt.

Answer 4

ng-repeat Direktive funktioniert wie for in Schleife in Javascript.

ng-repeat="x in names" bedeutet, dass Sie jeden Index von names Array Iterieren.

$scope.names = [ 
     {name:'Jani',country:'Norway'}, 
     {name:'Hege',country:'Sweden'}, 
     {name:'Kai',country:'Denmark'} 
    ]; 

Beide sind gleich:

for (var X in $scope.names) { 
    console.log($scope.names[X].name + ',' + $scope.names[X].country); 
} 

und

ng-repeat="x in names" 

x ng-repeat Richtlinie der Definition in Winkel.