使用 ng-repeat 从对象属性中的数组访问项目
[英] Access items from array within object property using ng-repeat
本文介绍了使用 ng-repeat 从对象属性中的数组访问项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个带有项目类型设置的简单类别，其中类别将是我的所有专辑以及所有曲目.我试过这样设置:
enitoniApp.controller('musicItems', ['$scope', function ($scope) {$scope.albums = [{name: '翻山越岭',曲目:[{name: '翻山越岭',参考:'otmt'，已发布:0,价格:0,},{名称: '!C3',参考:'冰'，已发布:0,价格:0,}]}]}]);
并在视图中:
<div id="allMusic" ng-controller="musicItems"><div id="专辑"><ul><li ng-repeat="专辑中的专辑"><div class="title">{{album.name}}</div><ul><li ng-repeat="track in albums.tracks">{{ track.name}}</li>
预期的行为是 angular.js 将根据曲目的数量重复专辑 li 中的 li，在本例中为 2.但是，我无法访问 tracks 中的数组项数量.
这就是我想要实现的目标:
<div id="allMusic" ng-controller="musicItems"><div id="专辑"><ul><li><div class="title">翻山越岭</div><ul><li>翻山越岭</li><li>!C3</li>
解决方案
Inner ngRepeat 应该是 track in album.tracks (you have albums):
<li ng-repeat="track in album.tracks">{{ track.name}}</li><!-- 额外的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 -----^ -->
这篇关于使用 ng-repeat 从对象属性中的数组访问项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
