Question

我从服务请求中返回了以下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;
        });
}]);

有人可以帮我理解为什么我会收到这个错误吗？

Answer 1

将track by $index添加到您的ng重复中，而不是：

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

尝试：

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

有关于此的进一步信息 the documentation for this error message：

如果ngRepeat表达式中存在重复键，则会发生。   禁止重复键，因为AngularJS使用键来关联DOM   带有项目的节点。

默认情况下，集合通过引用键入，这是必需的   最常见的模型，但对于原始类型可能会有问题   实习（分享参考）。

Answer 2

您的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。

Answer 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

Answer 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;
    });
}]);

Answer 5

不允许使用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>

Answer 6

//要允许使用ASP.NET AJAX从脚本调用此Web Service，请取消注释以下行。

[System.Web.Script.Services.ScriptService] ==＆gt;取消注释此行如果使用.NET服务

＆＃34;不允许在转发器中复制＆＃34;在ng-repeat上

6 个答案: