AngularJS - ngrepeat错误中的重复键

时间:2014-02-17 12:44:52

标签: javascript angularjs angularjs-ng-repeat

我想在我看来解析这个控制器:

testapp.controller("searchController", function($scope, $rootScope, $http, $location) {

    var load = function() {
        console.log('call load()...');

        var url = 'products.json';

          if($rootScope && $rootScope.appUrl) {
                url = $rootScope.appUrl + '/' + url;
              }

        $http.get(url)
         .success(function(data, status, headers, config) {
      $scope.product = data;
      angular.copy($scope.product, $scope.copy);
         });
    }

    load();



});

但是我已经实现了这样的解析:

<div class="container main-frame" ng-app="testapp"
    ng-controller="searchController" ng-init="init()">
    <h1 class="page-header">Products</h1>
    <table class="table">
        <thead>
            <tr>
                <th width="25px">ID</th>
                <th>TITLE</th>
                <th>PRICE</th>
                <th>Description</th>
                <th width="50px"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="p in product">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.description}}</td>
                <!-- ng-show="user.id &&user.id==e.user_id" -->
            </tr>
        </tbody>
    </table>
    <!-- ng-show="user.username" -->
    <p>
</div>

我目前得到的是:

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.8/ngRepeat/dupes?p0=p%20in%20product&p1=string%3A%22
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:6:449
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:184:445
    at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:99:371)
    at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:299)
    at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:67:98)
    at E (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:71:85)
    at XMLHttpRequest.v.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:133) 

我尝试将其更改为:

p in product by $id

给了我一个syntax error

感谢您的建议!

1 个答案:

答案 0 :(得分:6)

试试这个

<tr ng-repeat="p in product track by $index">
      <td>{{p.id}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.description}}</td>
</tr>

Usage of track by