無法從一個函數中的數據控制器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>