繁体   English   中英

Angular ngRepeat:dupes错误(尽管没有重复的键)

[英]Angular ngRepeat: dupes error (although there are no duplicate keys)

我正在学习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=字符串%3Ap&p2 = p at Error(native)at

在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的跟踪。 在过滤器之前添加时,它会向表中添加一堆空行。 在过滤器后插入时,没有变化。

当名称表明存在重复的索引值时,将收到错误[ngRepeat:dupes]

我建议您使用简单的console.log(output);调试$ http.post中收到的数据console.log(output); 请记住,序列化ng-repeat数组是防止欺骗错误的好方法。

这也将解决空行

如果您认为您的回答是正确形成的,请尝试粘贴您正在接收的内容的调试

你的两个服务电话之间有竞争条件。 无论最后完成的是将其结果分配给$ scope.topics。 我假设对用户服务的调用应如下所示:

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

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

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

我会怀疑你在最后添加你的曲目表达时会看到空行(而不是你问题中指出的其他方向)。 这很可能意味着您的topics数组中有空或未定义的对象。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM