"Дубликаты в повторителе не допускаются" на ng-repeat

У меня есть следующие данные json, возвращенные из запроса на обслуживание:

{
    "entries": [{
        "id": 2081,
        "name": "BM",
        "niceName": "bodmas"
        }]
    }, {
        "id": 8029,
        "name": "Mas",
        "niceName": "Masm"
        }]
    }],
    "count": 2
}

И я пробую следующий код в html, чтобы просмотреть эти данные:

<option ng-repeat="entry in entries" value="{{entry.name}}">{{entry.name}}</option>

Я получаю следующую ошибку при запуске кода:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: entry in entries, Duplicate key: string:c

Ниже приведен код моего контроллера:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){
       ...

       $http.get('https://myServiceURL').success(function(data){
                    $scope.entries = data;
        });
}]);

Может кто-нибудь помочь мне понять, почему я получаю эту ошибку?

Ответы

Ответ 1

Ваш JSON недействителен и должен быть:

{
    "entries": [{
        "id": 2081,
        "name": "BM",
        "niceName": "bodmas"
    }, {
        "id": 8029,
        "name": "Mas",
        "niceName": "Masm"
    }],
    "count": 2
}

Кроме того, убедитесь, что вы обращаетесь к документу на нужном уровне, используйте:

$http.get('https://myServiceURL').success(function(data){
    $scope.entries = data.entries;
});

Затем он должен работать. Смотрите JSBin.

Ответ 2

Добавьте track by $index к вашему повторению ng, а вместо:

<option ng-repeat="entry in entries" value="{{entry.name}}">{{entry.name}}</option>

Try:

<option ng-repeat="entry in entries track by $index" value="{{entry.name}}">{{entry.name}}</option>

Там дополнительная информация об этом в документация для этого сообщения об ошибке:

Происходит, если в выражении ngRepeat есть повторяющиеся ключи. Дублирующиеся ключи запрещены, поскольку AngularJS использует ключи для связывания DOM узлы с элементами.

По умолчанию коллекции вводятся по ссылке, которая желательно для наиболее распространенные модели, но могут быть проблематичными для примитивных типов, которые интернированные (общие ссылки).

Ответ 3

Если я могу добавить дополнительную причину, почему это может произойти...

Если вы делаете это с помощью объекта JS [] или {}

и вы передаете его в такую директиву

<my-directive my-attribute="{{ myObject }}"></my-directive>

Внутри директивы вы должны вернуть myObject обратно в объект, сделав это

...
controller: function( $scope ){

  $scope.links = $scope.$eval( $scope.myObject );
....

Тогда HTML и ng-repeat будут работать

...
<span class="" ng-repeat="link in links">
...

ngRepeat не знает, как повторяться по одной строке.

Вот как будет выглядеть объект перед $scope. $eval

"[{ hello: 'you' }]"

и после $scope. $eval()

[{ hello: 'you' }] an actual object to repeat over.

Тип ошибки делает ссылку, что он не может повторить строку. Вот ошибка, которую я получил.

Ошибка: [ngRepeat: dupes] http://errors.angularjs.org/1.3.0-beta.8/ngRepeat/dupes?p0=link%20in%20links&p1=string%3Al

Ответ 4

Похоже, что у вас есть проблема со структурой данных в вашей области. В вашем примере JSON отображается объект с свойством entries и свойством count. Затем вы помещаете весь этот объект в область видимости entries. Это означает, что вам нужно получить доступ к записям как entries.entries, счетчик в entries.count. Возможно, этот контроллер ближе к тому, что вы хотели:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){
    ...

    $http.get('https://myServiceURL').success(function(data){
        $scope.entries = data.entries;
        $scope.count = data.count;
    });
}]);

Ответ 5

//Чтобы позволить этой веб-службе вызываться из script, используя ASP.NET AJAX, раскомментируйте следующую строку.

[System.Web.Script.Services.ScriptService] == > Раскомментировать эту строку Если вы используете .NET Service

Ответ 6

дубликатов в In ng-repeat не разрешено. Пример

    <!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>