Soundcloud API + ng-repeat 未完全填充视图

Question

我正在为我朋友的乐队编写一个站点，该站点使用 Angular 以及 SoundCloud API，但我无法解决这个问题。

在我的第一个控制器中，我能够使用简单的 $http.get.

使用由 soundcloud 用户 JSON 填充的表达式更新视图

在我的第二个控制器中，我想抓取每个曲目 + 曲目统计数据并将它们放在自己的 html 段落中，并使用 ng-repeat。但是，当我这样做时，ng-repeat 循环了适当的次数 (45X)，但只有 3 个创建的元素填充了曲目信息。大约有 40 个空白元素，然后显示前三首歌曲，因为它们后面应该是另一个空白部分。

这是我的代码：

(function(){

angular.module("ninety", [])

  .controller("bandInfo", ['$http', function($http){
   
    var ninetystuff = this; 
    ninetystuff.data = [];
    $http.get('https://api.soundcloud.com/users/23749941.json?client_id=b4809581f93dc4d3308994300923b660').success(function(data){
      ninetystuff.data = data;
    });
 
  }])
  
  .controller("music", ['$http', '$scope', function($http, $scope){
     
    var ninetyshit = this;
    ninetyshit.data = [];
    $scope.show = false;
    
    SC.initialize({
      client_id: "b4809581f93dc4d3308994300923b660"
    });

    SC.get('/users/23749941/tracks').then(function(tracks){
      ninetyshit.data = tracks;
      $scope.show = true;
    });
   
    $scope.playTrack = function(track) {
      SC.oEmbed(track, {
        auto_play: true,
        maxheight: 200
      }).then(function(embed){
        $("#player").empty();
        $("#player").append(embed.html);
      });
    }; 
   
  }])

  .directive('scrollToPlayer', function() {                                              
    return {
      restrict: 'A',
      link: function(scope, $elm, attr) {
        $elm.on('click', function() {
          $('html,body, #bg').animate({scrollTop: 400 }, 1000);
        });
      }
    };
  });

})();

我尝试创建一个服务来处理从 'GET' 请求返回的承诺，但我得到了相同的结果。

Answer 1

我终于弄明白了，我以错误的方式解析了 JSON 数据。我应该在问题中提供我的 html 代码。当我只需要循环遍历返回的数据本身时（即 ng-repeat="index in data"），我在数据 [0] 数组中使用 ng-repeat（即 - ng-repeat="index in data[0]"） .愚蠢的错误，我绝对为自己做了复杂的事情。事实上，我使用的错误解决方案显示了一些但不是所有曲目，这让我错误地认为我正在正确循环，而实际上我并没有正确循环。

希望这对遇到类似问题的 Angular 新手有所帮助。学过的知识。

Soundcloud API + ng-repeat 未完全填充视图

Soundcloud API + ng-repeat not populating view completely

soundcloud

angularjs

ng-repeat

angularjs-ng-repeat