трэк $ индекса показывает слишком много результатов

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> 

И по какой-то причине, что делает этот код выводится миллион панелей, которые все остаются пустыми ...

Как это возможно? Благодарю.

EDIT

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; 
    }); 
}); 

To:

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>