angularjs - ng-repeat 没有正确复制

Question

我有 ng-repeat 在不同的模板中工作，但是，我无法让我的 album.html 模板显示内容。这是我的。

app.js

...
            .state('album', {
                url: '/album',
                controller: 'AlbumCtrl as album',
                templateUrl: '/templates/album.html'
            })
...

AlbumCtrl.js

(function() {

  function AlbumCtrl() {
    this.albumData = angular.copy(albumPicasso);
  };

  angular
    .module('blocJams')
    .controller('AlbumCtrl', AlbumCtrl);

})();

fixture.js(我想要复制的对象所在的位置)

var albumPicasso = {
    title: 'The Colors',
    artist: 'Pablo Picasso',
    label: 'Cubism',
    year: '1881',
    albumArtUrl: 'assets/images/album_covers/01.png',
    songs: [
        { title: 'Blue', duration: 161.71, audioUrl: 'assets/music/bloc_jams_music/blue' },
        { title: 'Green', duration: 103.96, audioUrl: 'assets/music/bloc_jams_music/green' },
        { title: 'Red', duration: 268.45, audioUrl: 'assets/music/bloc_jams_music/red' },
        { title: 'Pink', duration: 153.14, audioUrl: 'assets/music/bloc_jams_music/pink' },
        { title: 'Magenta', duration: 374.22, audioUrl: 'assets/music/bloc_jams_music/magenta' }
    ]
};

albumt.html(这是我的带有 ng-repeat 的模板)

<main class="album-view container narrow">
    <section class="clearfix">
        <div class="column half">
            <img src="/assets/images/album_covers/01.png" class="album-cover-art">
        </div>
        <div class="album-view-details column half">
            <h2 class="album-view-title">The Colors</h2>
            <h3 class="album-view-artist">Pablo Picasso</h3>
            <h5 class="album-view-release-info">1909 Spanish Records</h5>
        </div>
    </section>
    <table class="album-view-song-list">
        <tr class="album-view-song-item" ng-repeat="album in album.albumData" ng-mouseover="hovered = true" ng-mouseleave="hovered = false">
            <td class="song-item-number">
              <span ng-show="!playing && !hovered"></span>
              <a class="album-song-button" ng-show="!playing && hovered"><span class="ion-play"></span></a>
              <a class="album-song-button" ng-show="playing"><span class="ion-paused"></span></a>
            </td>
            <td class="song-item-title">{{ album.songs.title }}</td>
            <td class="song-item-duration">{{ album.songs.duration }}</td>
        </tr>
    </table>
</main>

<ng-include src="'/templates/player_bar.html'"></ng-include>

{{ album.songs.title }} 和 {{ album.songs.duration }} 没有显示任何内容，我也没有收到任何错误。我个人认为我没有正确地通过我的 Controller 复制我的对象？此外，如何通过我的 Controller 查看我对所述对象的输入，以测试我的对象 albumPicasso 是否被正确复制？

供引用

这个 Controller (CollectionCtrl.js) 工作正常并且反射(reflect)了我除了 for 循环之外想做的事情。

(function() {

  function CollectionCtrl() {
    this.albums = [];
    for (var i=0; i < 12; i++) {
      this.albums.push(angular.copy(albumPicasso));
    }
  }


  angular
    .module('blocJams')
    .controller('CollectionCtrl', CollectionCtrl);
})();

Answer 1

album.albumData 中的专辑
可能您不想覆盖 album 变量名？

Controller 别名只是范围内的变量。你正在覆盖它。

看起来像:

for (var i = 0; i < album.albumData.length; i++) {
  album = album.albumData[i]; // <-- We brake all things here
}

只需将 ngRepeat 中的 album 重命名为类似 item 的名称:

ng-repeat="album.albumData 中的项目"

---

此外，您想要迭代一个 songs 数组，而不是一个对象:

ng-repeat="album.albumData.songs 中的歌曲"

和

{{song.title}}