Я також хотів би зазначити нову функціональність AngularJSng-repeat
, а саме - спеціальні точки початку та кінця повтору . Ця функціональність була додана для того, щоб повторити ряд елементів HTML, а не просто a один батьківського елемента 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
) також працюють як очікувалося.