Eu também gostaria de mencionar uma nova funcionalidade do AngularJSng-repeat
, a saber, pontos especiais de início e fim de repetição . Essa funcionalidade foi adicionada para repetir uma série de elementos HTML em vez de apenas um elemento HTML pai único .
Para usar os pontos inicial e final do repetidor, é necessário defini-los usando ng-repeat-start
e ng-repeat-end
diretivas, respectivamente.
A ng-repeat-start
diretiva funciona muito semelhante à ng-repeat
diretiva. A diferença é que isso repetirá todos os elementos HTML (incluindo a tag em que está definida) até a tag HTML final em que ng-repeat-end
é colocada (incluindo a tag com ng-repeat-end
).
Código de amostra (de um controlador):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Modelo HTML de amostra:
<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>
A saída seria semelhante à seguinte (dependendo do estilo 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]
======================
Como você pode ver, ng-repeat-start
repete todos os elementos HTML (incluindo o elemento with ng-repeat-start
). Todas ng-repeat
as propriedades especiais (neste caso $first
e $index
) também funcionam como esperado.