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

不是每次都从ng-repeat调用getAlbumsInfo，而是在控制器中生成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>

无法从控制器中的函数获取数据以进行ng-repeat

2 个答案: