按$index跟踪显示的结果太多

track by $index shows too many results

本文关键字：结果 太多 显示 跟踪 index      更新时间：2023-09-26

所以我从Angular得到了以下错误：

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.

所以我通过以下操作修复了它：

rooster in rooster.uren track by $index

但它所做的是创建了大量的面板，而我的jSon只有4行。

JS：

angular.module("PixelFM").controller("grootRoosterController", function ($http) {
    var that = this;
    that.uren = [];
    $http({
        method: 'GET',
        url: '/assets/scripts/GROOTROOSTERTEST.json'
    }).success(function(data) {
        that.uren = data;
    });
});

重复的html重复：

<div class="col-md-6" ng-repeat="rooster in rooster.uren track by $index">
    <div class="panel panel-default">
        <div class="panel-body grootrooster">
            {{rooster.name}}
        </div>
    </div>
</div>

出于某种奇怪的原因，这段代码所做的是输出一百万个面板，这些面板都是空的。。。

这怎么可能？谢谢

编辑

Json；

[
    {"host": "Adjuh5", "showname": "", "hour": "1446674064", "cohost": "Finicky"},
    {"host": "Beatgrid", "showname": "", "hour": "1446674064", "cohost": ""},
    {"host": "Adjuh5", "showname": "", "hour": "1446674064", "cohost": ""},
    {"host": "Finicky", "showname": "", "hour": "1446674064", "cohost": ""}
]

适合我！检查您的呼叫$http并更改：

angular.module("PixelFM").controller("grootRoosterController", function ($http) {
    var that = this;
    that.uren = [];
    $http({
        method: 'GET',
        url: '/assets/scripts/GROOTROOSTERTEST.json'
    }).success(function(data) {
        that.uren = data;
    });
});

收件人：

angular.module("PixelFM").controller("grootRoosterController", function ($scope, $http) {
   $scope.rooster = {uren:[];
    $http({
        method: 'GET',
        url: '/assets/scripts/GROOTROOSTERTEST.json'
    }).success(function(data) {
        $scope.rooster.uren = data;
    });
});


angular.module('app', []).controller('mainCtrl', function($scope) {
  $scope.rooster = {
    uren: [{
      "host": "Adjuh5",
      "showname": "",
      "hour": "1446674064",
      "cohost": "Finicky"
    }, {
      "host": "Beatgrid",
      "showname": "",
      "hour": "1446674064",
      "cohost": ""
    }, {
      "host": "Adjuh5",
      "showname": "",
      "hour": "1446674064",
      "cohost": ""
    }, {
      "host": "Finicky",
      "showname": "",
      "hour": "1446674064",
      "cohost": ""
    }]
  };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
  <hr/>Quick-Ng-Repeat
  <hr/>
  <div ng-repeat="rooster in rooster.uren">
    <div class="panel panel-default">
      <div class="panel-body grootrooster">
        {{rooster.host}}
      </div>
    </div>
  </div>
</div>

相关文章：