Я также хотел бы упомянуть новую функциональность AngularJSng-repeat
, а именно, специальные повторные начальную и конечную точки . Эта функциональность была добавлена для того, чтобы повторять серию HTML-элементов вместо одного родительского HTML-элемента.
Для того , чтобы начать и конечное использование повторителя точек необходимо определить их с помощью ng-repeat-start
и ng-repeat-end
директив соответственно.
ng-repeat-start
Директива работает очень похожа на ng-repeat
директиву. Разница в том, что он будет повторять все элементы HTML (включая тег, для которого он определен) до конечного тега HTML, в ng-repeat-end
который помещается (включая тег с ng-repeat-end
).
Пример кода (от контроллера):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Образец HTML-шаблона:
<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>{{$index+1}}. </span>
<strong>{{id}} </strong>
<span class="name">{{user.name}} </span>
<span class="age">({{user.age}})</span>
</div>
<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>
Вывод будет выглядеть примерно так (в зависимости от стиля HTML):
==== User details ====
1. 119827 Stephan (18)
======================
==== User details ====
2. 182982 John (30)
[sample image goes here]
======================
==== User details ====
3. 198784 Antonio (32)
[sample image goes here]
======================
Как видите, ng-repeat-start
повторяются все элементы HTML (включая элемент с ng-repeat-start
). Все ng-repeat
специальные свойства (в данном случае $first
и $index
) также работают как положено.