Question

我想从下面的变量访问对象属性的值，除了使用ng-repeat的songs属性。

var albumPicasso = { title: 'The Colors', artist: 'Pablo Picasso', label: 'Cubism', year: '1881', albumArtUrl: 'assets/images/album_covers/01.png', songs: [ { title: 'Blue', duration: '4:05', audioUrl: 'assets/music/blue' }, { title: 'Green', duration: '5:05', audioUrl: 'assets/music/green' }, { title: 'Red', duration: '3:45', audioUrl: 'assets/music/red' }, { title: 'Pink', duration: '4:05', audioUrl: 'assets/music/pink' }, { title: 'Magenta', duration: '4:03', audioUrl: 'assets/music/magenta' } ] };

这是我的controller.js中我的controller.js的样子：

(function(){
  function AlbumCtrl(){
    this.albumData = albumPicasso;
  }
  angular
    .module('blocJams')
    .controller('AlbumCtrl', AlbumCtrl)

})();

以下是我的html，我试图使用ng-repeat访问这些值并且它没有工作我根本没有看到任何输出

<div class="album-view-details column half" ng-repeat="x in album.albumData">
           <h2 class="album-view-title">{{x.title}}</h2>
           <h3 class="album-view-artist">{{x.artist}}</h3>
           <h5 class="album-view-release-info">{{x.year}}</h5>
         </div>

Answer 1

ngRepeat需要一个集合。

<强> ngRepeat

ngRepeat指令从a中为每个项目实例化一次模板采集。每个模板实例都有自己的范围，给定的范围 loop变量设置为当前集合项，并设置$ index 到项目索引或键。

您可以使用以下内容直接打印对象属性albumPicasso (title, artits, label, year)的值

<h2 class="album-view-title">{{albumData.title}}</h2>
      <h3 class="album-view-artist">{{albumData.artist}}</h3>
      <h5 class="album-view-release-info">{{albumData.year}}</h5>

这样的事情：

＆＃13;

(function() {
  function AlbumCtrl($scope) {
    var albumPicasso = {
      title: 'The Colors',
      artist: 'Pablo Picasso',
      label: 'Cubism',
      year: '1881',
      albumArtUrl: 'assets/images/album_covers/01.png',
      songs: [{
          title: 'Blue',
          duration: '4:05',
          audioUrl: 'assets/music/blue'
        },
        {
          title: 'Green',
          duration: '5:05',
          audioUrl: 'assets/music/green'
        },
        {
          title: 'Red',
          duration: '3:45',
          audioUrl: 'assets/music/red'
        },
        {
          title: 'Pink',
          duration: '4:05',
          audioUrl: 'assets/music/pink'
        },
        {
          title: 'Magenta',
          duration: '4:03',
          audioUrl: 'assets/music/magenta'
        }
      ]
    };
    $scope.albumData = albumPicasso;
  }
  angular
    .module('blocJams', [])
    .controller('AlbumCtrl', AlbumCtrl);


})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="blocJams">
  <div data-ng-controller="AlbumCtrl">
    <div class="album-view-details column half">
      <h2 class="album-view-title">{{albumData.title}}</h2>
      <h3 class="album-view-artist">{{albumData.artist}}</h3>
      <h5 class="album-view-release-info">{{albumData.year}}</h5>
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果您只有一个对象，则不需要ng-repeat。您可以通过执行{{this.albumData.title}}来引用属性。ng-repeat与数组一起使用。

此外，如果它是一个数组，在ng-repeat我不确定album中的album.albumData字来自哪里，您可能想要使用this.albumData 。

使用ng-repeat访问变量中的对象

2 个答案: