使用纳克重复从对象属性中的数组访问项目 [英] Access items from array within object property using ng-repeat

查看:108
本文介绍了使用纳克重复从对象属性中的数组访问项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图创建项目这种设置,这里的类别将是我所有专辑所有曲目简单分类。我试图将其设置是这样的:

  enitoniApp.controller('musicItems',['$范围',函数($范围){
    $ scope.albums = [
        {
            名称:'翻山越岭',
            曲目:
                {
                    名称:'翻山越岭',
                    裁判:otmt',
                    发布:0,
                    价格:0,
                },
                {
                    名称:'C3',
                    裁判:'冰',
                    发布:0,
                    价格:0,
                }
        ]
    }
    ]
}]);

和视图:

 <身体GT;
    < D​​IV ID =音乐指南NG控制器=musicItems>
        < D​​IV ID =专辑>
            < UL>
                <李NG重复=专辑在专辑>
                    < D​​IV CLASS =标题> {{album.name}}< / DIV>
                    < UL>
                        <李NG重复=轨道albums.tracks> {{track.name}}< /李>
                    < / UL>
                < /李>
            < / UL>
        < / DIV>
    < / DIV>
< /身体GT;

预期的行为是angular.js会重蹈的专辑里面基础上如何许多轨道,在这种情况下为两个。但是,我不能让它访问轨道内的数组项金额

这就是我想实现:

 <身体GT;
    < D​​IV ID =音乐指南NG控制器=musicItems>
        < D​​IV ID =专辑>
            < UL>
                <立GT;
                    < D​​IV CLASS =标题>翻山越岭< / DIV>
                    < UL>
                        <立GT;翻山越岭< /李>
                        <立GT;!C3< /李>
                    < / UL>
                < /李>
            < / UL>
        < / DIV>
    < / DIV>
< /身体GT;


解决方案

内蒙古 ngRepeat 轨道album.tracks (你的专辑的取值

 <李NG重复=轨道album.tracks> {{track.name}}< /李>
<! - 额外的s在这里----- ^ - >

I'm trying to create a simple category with items kind of setup, where the categories will be all my albums with all the tracks. I've tried to set it up like this:

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

and in the 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>

The expected behaviour is that angular.js will repeat the li's inside the album li based on how many tracks, which in this case is two. However, I cannot get it to access the amount of array items inside tracks.

This is what I am trying to achieve:

<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>

解决方案

Inner ngRepeat should be track in album.tracks (you have albums):

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

这篇关于使用纳克重复从对象属性中的数组访问项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆