También me gustaría mencionar una nueva funcionalidad de AngularJSng-repeat
, a saber, puntos especiales de inicio y finalización de repetición . Esa funcionalidad se agregó para repetir una serie de elementos HTML en lugar de un solo elemento HTML principal.
Para utilizar los puntos de inicio y finalización del repetidor, debe definirlos utilizando las directivas ng-repeat-start
y ng-repeat-end
respectivamente.
La ng-repeat-start
directiva funciona de manera muy similar a la ng-repeat
directiva. La diferencia es que repetirá todos los elementos HTML (incluida la etiqueta en la que se define) hasta la etiqueta HTML final donde ng-repeat-end
se coloca (incluida la etiqueta con ng-repeat-end
).
Código de muestra (de un controlador):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Plantilla HTML de muestra:
<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>
La salida sería similar a la siguiente (dependiendo del 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 puede ver, ng-repeat-start
repite todos los elementos HTML (incluido el elemento con ng-repeat-start
). Todas ng-repeat
las propiedades especiales (en este caso $first
y $index
) también funcionan según lo esperado.