2016-06-01 1 views
2

Я новичок в angular.js, просто работая над функцией ng-repeat. в котором я использую ng-repeat="x in name", где я определил некоторые значения в names, но я не определял x нигде в полном коде.Как X получает значение в angularJS

Вот мой код:

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

Все работает нормально, но я удивляюсь, как ценности приходят в x или что именно ng-repeat делает здесь, как я просто звоню x но не определяет какое-либо значение в x ,

+0

Директива 'ng-repeat' работает как' for in' loop в javascript. –

+0

'ng-repeat' как петля foreach или как @RohitJindal сказал' for in'. Он зацикливает объект по объекту в массиве объекта, поэтому 'x' принимает значение каждого объекта. – Alexis

ответ

4

x определяется директивой углового ng-repeat. Он выполняет итерацию по всем значениям в names и привязывает каждое значение к x по очереди.

Обратите внимание, что вы можете выбрать любое другое допустимое имя переменной вместо x.

Причина отсутствия конфликта между каждым значением x заключается в том, что каждая итерация получает свой собственный $scope.

См. Также ng-repeat documentation.

+0

так что я вынужден использовать x в 'ng-repeat' или я могу использовать любую другую переменную ?? –

+0

Вы можете изменить 'x' на любое другое допустимое имя переменной, и каждое значение в' names' будет затем создано в переменной с именем, которое вы выбрали. –

1

Я пошел, чтобы увидеть код на git-hub ng-repeat.js

Ng-повтор работ, наблюдая ссылку на коллекцию, мы указали, используя этот код, который игнорирует каждое свойство, которое начинается с $.

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

и во время компиляции это происходит:

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*$/); 

это разделяло слова в ваших нг-повторить значения в НЕЧТО в СБОРЕ и, возможно, с некоторым TRACKBY в конце концов. Таким образом, переменная создается в директиве ngRepeat для итерации по нашей коллекции, которая просматривается с использованием часов watchCollection.

SOMETHING будет определяться в рамках директивы ngRepeat. КОЛЛЕКЦИЯ будет фактически ссылкой из области пользователя. Вы можете выбрать любое имя, которое вы хотите для ЧТО-ТО, но не для КОЛЛЕКЦИИ.

+0

Угловой захват определения его, анализирует строку в 2 захватывает первый и создает переменную с тем же именем, которая будет служить курсором во время фазы $ digest, чтобы прокрутить второй объект, определенный в области пользователя. Переменная не остается доступной, поскольку она создается только для запуска повтора. Я делаю это, он должен работать так. –

1

ng-repeat будет перебирать ваш массив names. Каждый объект, который он итерирует, представлен именем, которое вы указываете в шаблоне - в вашем случае - x. Вы можете дать ему любое имя, которое хотите, и оно будет представлять объект из выбранного массива.

2

ng-repeat директива работает так же, как for in петля в javascript.

ng-repeat="x in names" означает, что вы итерируете каждый индекс массива names.

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

Оба же:

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

и

ng-repeat="x in names" 

х определяется в директиве ng-repeat угловых в.