无法从一个函数中的数据控制器NG-重复

Question

我在AngularJS新。我想在一个视图中创建动态表：

<table class="table"> 
    <thead> 
     <tr> 
      <td>Name</td> 
      <td>Genre</td> 
      <td>Duration</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="album in getAlbumsInfo(artists)"> 
      <td>{{ album.name }}</td> 
      <td>{{ album.genre }}</td> 
      <td>{{ album.duration }}</td> 
     </tr> 
    </tbody> 
</table> 

这里是我的控制器（artists从后端接收）：

$scope.getAlbumsInfo = function (artists) { 

    var albumsData = []; 

    artists.forEach(function (artist) { 

     var albumItemMap = new Map(); 

     albumItemMap.set("name", artist.name); 
     albumItemMap.set("genre", artist.genre); 
     albumItemMap.set("duration", artist.geduration); 
     albumsData.push(albumItemMap); 
    }); 

    return albumsData; 
}; 

但它并不显示在表中的任何数据。只是简单的表格。 如果我用从$scope类似的硬编码数据我检查：

$scope.albums = [ 
    { name: 'Cali Roll', genre: 'Pop', duration: 45 }, 
    { name: 'Philly', genre: 'Rock', duration: 50 }, 
    { name: 'Rainbow', genre: 'Relax', duration: 55 } 
]; 

和（视部分）：

<tr ng-repeat="album in albums"> 

它工作正常。但是，在功能getAlbumsInfo的情况下，它不起作用。我究竟做错了什么？

UPD：我只需要一个功能，它的强制性条件。

Answer 1

你可以做

<table class="table"> 
    <thead> 
     <tr> 
      <td>Name</td> 
      <td>Genre</td> 
      <td>Duration</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="album in getAlbumsInfo()"> 
      <td>{{ album.name }}</td> 
      <td>{{ album.genre }}</td> 
      <td>{{ album.duration }}</td> 
     </tr> 
    </tbody> 
</table> 

控制器

$scope.getAlbumsInfo = function() { 
    //call API and get artists and in success function add the code 
     return API.getArtists().then(successfn); 

    }; 

function successfn(response){ 
    albumsData = []; 
    var artist = response.data; 

     artists.forEach(function (artist) { 

      var albumItemMap = new Map(); 

      albumItemMap.set("name", artist.name); 
      albumItemMap.set("genre", artist.genre); 
      albumItemMap.set("duration", artist.geduration); 
      albumsData.push(albumItemMap); 
     }); 

return albumsData; 

} 

Answer 2

而不是从调用getAlbumsInfo的NG-重复每次生成您的控制器的albums数组，然后重复它在视图中。调用getAlbumsInfo函数当你从后台得到它artists对象如下图所示：

$scope.albums = $scope.getAlbumsInfo(artists); 

现在，因为我们有albums阵列，重复它在你的HTML：

<tr ng-repeat="album in albums"> 
     <td>{{ album.name }}</td> 
     <td>{{ album.genre }}</td> 
     <td>{{ album.duration }}</td> 
</tr>