Question

所以我从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": ""}
]

Answer 1

适合我！检查您的电话$ 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>

跟踪$ index显示太多结果

1 个答案: