angularjs - array - ng-repeat select

Angular ng-repeat Error "No se permiten duplicados en un repetidor".

Question

Estoy definiendo un filtro personalizado así:

<div class="idea item" ng-repeat="item in items" isoatom>    
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

Como puede ver, la repetición ng donde se está utilizando el filtro está anidada dentro de otra repetición ng

El filtro se define así:

myapp.filter(''range'', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

Me estoy poniendo:

Error: No se permiten duplicados en un repetidor. Repetidor: comentar en item.comments | rango: 1: 2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

Answer 1

¿Qué pretendes que haga tu filtro de "rango"?

Aquí hay una muestra de trabajo de lo que creo que estás tratando de hacer: http://jsfiddle.net/evictor/hz4Ep/

HTML:

<div ng-app="manyminds" ng-controller="MainCtrl">
  <div class="idea item" ng-repeat="item in items" isoatom>    
    Item {{$index}}
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
      Comment {{$index}}
      {{comment}}
    </div>
  </div>
</div>

JS:

angular.module(''manyminds'', [], function() {}).filter(''range'', function() {
    return function(input, min, max) {
        var range = [];
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<=max; i++)
            input[i] && range.push(input[i]);
        return range;
    };
});

function MainCtrl($scope)
{
    $scope.items = [
        {
            comments: [
                ''comment 0 in item 0'',
                ''comment 1 in item 0''
            ]
        },
        {
            comments: [
                ''comment 0 in item 1'',
                ''comment 1 in item 1'',
                ''comment 2 in item 1'',
                ''comment 3 in item 1''
            ]
        }
    ];
}

Answer 2

En caso de que esto le suceda a alguien más, estoy documentando esto aquí, estaba recibiendo este error porque, por error, configuré el modelo ng igual que la matriz ng-repeat:

 <select ng-model="list_views">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

En lugar de:

<select ng-model="config.list_view">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

Revisé la matriz y no tenía ningún duplicado, simplemente verificaba las variables.

Answer 3

Estaba teniendo un problema en mi proyecto en el que estaba usando ng-repeat track by $ index pero los productos no se reflejaban cuando los datos provienen de la base de datos. Mi código es el siguiente:

<div ng-repeat="product in productList.productList track by $index">
  <product info="product"></product>
 </div>

En el código anterior, el producto es una directiva separada para mostrar el producto. Pero llegué a saber que $ index causa problemas cuando pasamos los datos del alcance. Así que las pérdidas de datos y DOM no se pueden actualizar.

Encontré la solución usando product.id como clave en ng-repeat como se muestra a continuación:

<div ng-repeat="product in productList.productList track by product.id">
  <product info="product"></product>
 </div>

Pero el código anterior vuelve a fallar y lanza el error siguiente cuando más de un producto viene con la misma identificación:

angular.js: 11706 Error: [ngRepeat: dupes] No se permiten duplicados en un repetidor. Use la expresión ''track by'' para especificar claves únicas. Reloj de repetición

Así que finalmente resolví el problema haciendo una clave dinámica única de ng-repetición como a continuación:

<div ng-repeat="product in productList.productList track by (product.id + $index)">
  <product info="product"></product>
 </div>

Esto resolvió mi problema y espero que esto te ayude en el futuro.

Answer 4

La solución se describe en realidad aquí: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS no permite duplicados en una directiva ng-repeat. Esto significa que si intenta hacer lo siguiente, obtendrá un error.

// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">

Sin embargo, cambiar el código anterior ligeramente para definir un índice para determinar la singularidad como se muestra a continuación lo hará funcionar nuevamente.

// This will work
<div ng-repeat="row in [1,1,1] track by $index">

Los documentos oficiales están aquí: https://docs.angularjs.org/error/ngRepeat/dupes

Answer 5

Mi respuesta JSON fue así:

{"items": 
   [
      {
      "index": 1,
      "name": "Samantha",
      "rarity": "Scarborough",
      "email": "[email protected]"
    },
      {
      "index": 2,
      "name": "Amanda",
      "rarity": "Vick",
      "email": "[email protected]"
    }]
}

Por lo tanto, utilicé ng-repeat = "item in variables.items" para mostrarlo.

Answer 6

No se permiten duplicados en un repetidor. Use la expresión ''track by'' para especificar claves únicas. Repetidor: sdetail en mydt, clave duplicada: cadena:, valor duplicado:

Me enfrenté a este error porque había escrito un nombre de base de datos incorrecto en mi parte php api ......

Por lo tanto, este error también puede ocurrir cuando está obteniendo los datos de la base de datos, cuyo nombre está escrito incorrectamente.

Answer 7

No se permiten duplicados en un repetidor. Use la expresión ''track by'' para especificar claves únicas.

Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

Ejemplo

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", [''$scope'', function ($scope)
        { 
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" }, 
                { firstName: "F3", lastName: "L3" }, 
                { firstName: "F4", lastName: "L4" }, 
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind) 
            { 
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>

Answer 8

Para aquellos que esperan JSON y siguen recibiendo el mismo error, asegúrese de analizar sus datos:

$scope.customers = JSON.parse(data)

Answer 9

Si llama a ng-repeat dentro de una etiqueta <ul>, es posible que pueda permitir duplicados. Vea este enlace para referencia. Ver Todo2.html

Answer 10

Si por casualidad, este error ocurre al trabajar con SharePoint 2010: cambie el nombre de las extensiones de archivo .json y asegúrese de actualizar su ruta de restService. No se requirió ningún "track by $ index" adicional.

Por suerte me fue enviado este link a esta razón:

.json se convierte en un tipo de archivo importante en SP2010. SP2010 incluye ciertos puntos finales de servicios web. La ubicación de estos archivos es la carpeta 14hive / isapi. La extensión de estos archivos son .json. Esa es la razón por la que da tal error.

"solo se preocupa de que el contenido de un archivo json sea json, no su extensión de archivo"

Una vez que se cambian las extensiones de archivo, debe estar todo configurado.