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

标签 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,
                }
        ]
    }
    ]
}]);

在 View 中:

<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。但是,我无法让它访问 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>

最佳答案

内部 ngRepeat 应该是 album.tracks 中的轨道(您有专辑):

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

关于javascript - 使用 ng-repeat 从对象属性中的数组访问项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31776769/

相关文章:

javascript - 在现有处理程序之前附加我的事件处理程序

html - 如何使用 ionic 创建 Pinterest 风格的布局?

html - symfony2 twig 白名单 html 标签

java - 如何在我的jsp文件中调用和运行java类方法

javascript - 动态滑动框宽度 css 问题

javascript - Angularjs 显示加载微调器

javascript - 管道多部分表单上传到另一台服务器

javascript - javascript 代码中未终止的字符串文字,我也不确定 PHP 代码

javascript - 以编程方式检查单选按钮不适用于每个浏览器

javascript - 加载html后如何加载js文件