Question

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

在我的第一个控制器中，我能够用声音用户JSON填充的表达式用简单的$ http.get更新视图。

在我的第二个控制器中，我想抓住每个曲目+曲目的统计数据，并将它们放在他们自己的带有ng-repeat的html段落中。但是，当我这样做时，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'请求返回的promise，但我得到了相同的结果。

Answer 1

我终于想通了，我正在以错误的方式解析JSON数据。我应该在问题中提供我的HTML代码。当我只需要遍历返回的数据本身时，我在数据[0]数组中使用ng-repeat（即 - ng-repeat =“data [0]中的索引”）（ie-ng-repeat =“index in数据”）。愚蠢的错误，我自己肯定过于复杂的事情。事实上，我使用的错误解决方案显示了一些但不是所有的轨道让我错误地认为我在没有时正确地循环。

希望这可以帮助任何有类似问题的Angular新手。学过的知识。

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

1 个答案: