Estoy probando un bucle AngularJS simple usando la directiva "ng-repeat" como se muestra a continuación:
<div ng-app="" ng-init="numbers=[1,3,5,2]">
<ul>
<li ng-repeat="item in numbers">{{ item }}</li>
</ul>
</div>
El resultado de esto es el siguiente, que es perfecto.
- 1
- 3
- 5
- 2
Sin embargo, cuando cambio la matriz de "números" como esta
<div ng-app="" ng-init="numbers=[1,3,5,2,2]">
Siendo el resto como es, no funciona.
El único cambio que hice es que he agregado un elemento más en la matriz de "números" 2 ". El problema que descubrí es cada vez que se repite un elemento en la matriz ( "2" en este caso ), se produce el problema.
El registro de la consola que noté es como abajo
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=item%20in%20numbers&p1=number%3A2&p2=2
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:232:494
at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:53)
at l.$get.l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:123:138)
at l.$get.l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:479
at Object.e [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:315)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:400)
at tc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:18:179)
Además, si la matriz es de valores de tipo de cadena, el mismo problema también persiste.
Por ejemplo, <div ng-app="" ng-init="names=["Bishnu", "Sagar", "John", "Bishnu"]">
En este caso también estoy ante el mismo problema.
Este comportamiento de AngularJS es muy extraño.
¿Alguien sabe el motivo y cómo resolverlo?
Respuestas
6 para la respuesta № 1Prueba esto...
los ngRepeat La directiva crea una instancia de una plantilla por elemento de una colección. Cada instancia de plantilla tiene su propio ámbito, donde la variable de bucle dada se establece en el elemento de colección actual, y $index se establece en el índice o clave del elemento.
ngRepeat Realiza los cambios correspondientes al DOM.
Cuando se agrega un artículo, una nueva instancia deLa plantilla se agrega al DOM. Cuando se elimina un elemento, su instancia de plantilla se elimina del DOM. Cuando los artículos se reordenan, sus respectivas plantillas se reordenan en el DOM. De forma predeterminada, ngRepeat no permite elementos duplicados en matrices. Esto se debe a que cuando hay duplicados, no es posible mantener una asignación uno a uno entre los elementos de la colección y los elementos DOM.
Si necesita repetir elementos duplicados, puede sustituir el comportamiento de seguimiento predeterminado con el suyo utilizando la pista por expresión
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}
</div>
Referir:https://docs.angularjs.org/api/ng/directive/ngRepeat
3 para la respuesta № 2
Según el Angular Docs No se permiten duplicados. Debe usar la expresión "seguimiento por" para especificar claves únicas.
Creado este Plnkr para tu referencia
<div ng-app="" ng-init="numbers=[1,3,5,2,2]">
<ul>
<li ng-repeat="item in numbers track by $index">{{ item }}</li>
</ul>
</div>
1 para la respuesta № 3
Tienes que usar track by $index para iterar a través de la entrada duplicada también.
0 para la respuesta № 4
puedes probar asi
<div ng-repeat="value in [4, 4] track by $index">{{value}}</div>