Angular ngRepeat: dupes 错误（虽然没有重复的键）答案

【问题标题】：Angular ngRepeat: dupes error (although there are no duplicate keys)Angular ngRepeat: dupes 错误（虽然没有重复的键）
【发布时间】：2016-05-17 04:29:57
【问题描述】：

我正在学习 MEAN，但遇到了 Angular 错误。我正在尝试在表格中显示表单数据，但是数据没有通过，我收到的错误是：

angular.js:11500 错误：[ngRepeat:dupes] http://errors.angularjs.org/1.3.5/ngRepeat/dupes?p0=topic%20in%20topics%20%20%7C%20filter%3A%20filter_q&p1=string%3Ap&p2=p 在错误（本机）在

在我的 index.html 文件中：

discussion_board.controller('dashboardController', function($scope, usersFactory, topicsFactory){
      $scope.topics = [];
      $scope.users = [];

      topicsFactory.index(function(data){
        $scope.topics = data;
      })

      usersFactory.index(function(data){
        $scope.topics = data;
      })

      $scope.addtopic = function(){
        console.log("from controller)");
        topicsFactory.addTopic($scope.new_topic, function(topics){
          $scope.topics = topics;
          $scope.new_topic = {};
         });
      }
    })
discussion_board.factory('topicsFactory', function($http){
    var factory = {};
    var users = [];

    factory.index = function(callback) {
      $http.get('/topics').success(function(output){
        callback();
      });
    }

    factory.addTopic = function(info, callback) {
      console.log("from factory");
      $http.post('/topics', info).success(function(output){
        callback();
      });
    }

在视图文件中：

<div ng-controller="dashboardController">
<h2>Welcome {{username}} !</h2>
<h5>Search:
    <input type="text" ng-model="filter_q" placeholder="search">
</h5>
<table class="table">
    <tr>
        <th>Category</th>
        <th>Topic</th>
        <th>User Name</th>
        <th>Posts</th>      
    </tr>
    <tr ng-repeat="topic in topics  | filter: filter_q">
        <td>{{topic.category}}</td>
        <td>{{topic.name}}</td>
        <td>{{topic.username}}</td>
        <td>{{topic.posts}}</td>
    </tr>

</table>

我在 ng-repeat 中添加了 $index 的曲目。在过滤器之前添加时，它会向表中添加一堆空行。在过滤器之后插入时，没有任何变化。

【问题讨论】：

不确定这是否与问题有关，但我认为您想更改对 usersFactory.index 的调用以将结果分配给 $scope.users 而不是 $scope.data。

标签： javascript angularjs

【解决方案1】：

您的两个服务调用之间存在竞争条件。无论哪个最后完成，都会将其结果分配给 $scope.topics。我假设对用户服务的调用应该是这样的：

 usersFactory.index(function(data){
    $scope.users= data;
 })

【讨论】：

【解决方案2】：

当顾名思义有重复的索引值时，会收到错误[ngRepeat:dupes]。

我建议您使用简单的console.log(output); 来调试在 $http.post 中收到的数据，记住序列化您的 ng-repeat 数组是防止重复错误的好习惯。

这也将解决空行

如果您认为您的回复格式正确，请尝试粘贴您收到的确切内容的调试信息

【讨论】：

【解决方案3】：

track by $index 应添加在ngRepeat 中的所有其他表达式之后。来自Angular docs：

注意：track by 必须始终是最后一个表达式

我怀疑当您最后添加按表达式跟踪时，您会看到空行（而不是您的问题中指出的相反方式）。这很可能意味着您的 topics 数组中有空的或未定义的对象。

我建议您检查您从工厂方法收到的数据。

【讨论】：