AngularJS - JSON数据未显示在ng-repeat中,但在控制台日志中显示

时间:2015-09-16 12:49:01

标签: json angularjs angularjs-ng-repeat

我很难从我发出的API调用中显示我的JSON数据,但如果我在控制台上记录它,我可以看到响应。

我的应用就像这样构建

angular.module('myApp', ['angularSoundManager', 'infinite-scroll'])
.controller('MovieController', function($scope, $http){

$scope.songs = [];
$scope.data = $scope.songs.slice(0, 20);
$scope.getMoreData = function () {
$scope.data = $scope.songs.slice(0, $scope.data.length + 10);
};

获取数据的功能

function fetch(){
$http.get("http://www.someAPI.com" + $scope.search + "&perpage=150")
.success(function(response){
 $scope.details = response;
 console.log(response);

 // for loop happens here to loop through the data and push it to the empty array

  for(var i=0; i < response.tracks.length; i++){

    var allTracks = {
    title: response.tracks[i].primary_title,
    };

 };
 $scope.songs.push(allTracks);
}

我的HTML

<div infinite-scroll='getMoreData()' infinite-scroll-distance='1'>
          <div ng-repeat="song in data">
           {{song.title}}
          </div>
        </div>

我可以看到console.log(response)我是Object {ID: 0, tracks: Array[150], total: 257}

另一方面,如果我使用ng-repeat="song in songs",我可以显示我的数据。这与我分配$scope.data$scope.songs

有关

我希望这个与切片一起使用的原因是能够使用无限滚动,因为我可以在页面上看到100到15.000个结果

2 个答案:

答案 0 :(得分:0)

尝试使用

angular.copy(source,destination);

答案 1 :(得分:0)

您可以通过将limitTo:100

限制为ng-repeat
<div ng-repeat="s in song" | limitTo:100">
    {{s.title}}
</div>