使用ng-repeat从对象属性中的数组访问项目

时间:2015-08-02 21:25:01

标签: javascript html angularjs angularjs-ng-repeat

我正在尝试创建一个包含项目设置的简单类别,其中类别将是我所有专辑的所有专辑。我试着像这样设置它:

enitoniApp.controller('musicItems', ['$scope', function ($scope) {
    $scope.albums = [
        {
            name: 'Over The Mountains',
            tracks: [
                {
                    name: 'Over The Mountains',
                    ref: 'otmt',
                    released: 0,
                    price: 0,
                },
                {
                    name: '!C3',
                    ref: 'ice',
                    released: 0,
                    price: 0,
                }
        ]
    }
    ]
}]);

并在视图中:

<body>
    <div id="allMusic" ng-controller="musicItems">
        <div id="albums">
            <ul>
                <li ng-repeat="album in albums">
                    <div class="title">{{album.name}}</div>
                    <ul>
                        <li ng-repeat="track in albums.tracks">{{ track.name}}</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>

预期的行为是angular.js将根据有多少曲目重复专辑li内的li,在这种情况下是2。但是,我无法访问tracks中的数组项。

这就是我想要实现的目标:

<body>
    <div id="allMusic" ng-controller="musicItems">
        <div id="albums">
            <ul>
                <li>
                    <div class="title">Over The Mountains</div>
                    <ul>
                        <li>Over the mountains</li>
                        <li>!C3</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>

1 个答案:

答案 0 :(得分:2)

内部ngRepeat应为track in album.tracks(您有相册 s ):

<li ng-repeat="track in album.tracks">{{ track.name}}</li>
<!-- extra "s" was here -----^ -->