我想从列表中的另一个数组中显示一个数组。我想使用ng-repeat在列表中显示数组。我尝试了各种各样的组合,但我无法使它发挥作用。我有以下代码:
var workouts = this;
workouts.workoutslist = [
{'workoutId': 1,
'workoutName': "Maandag",
'exercises':
[
{exerciseId: 1,
exerciseName: "exercise1"},
{exerciseId: 2,
exerciseName: "exercise2"}
]
},
{
'workoutId': 2,
'workoutName': "Dinsdag",
'exercises':
[
{exerciseId: 3,
exerciseName: "exercise3"},
{exerciseId: 4,
exerciseName: "exercise4"}
]
}
];
这有效:
<li class="item" ng-repeat="workoutTest in workout.workoutslist[0].exercises">{{ workoutTest.exerciseName }}
</li>
但这不是:
<li class="item" ng-repeat="workoutTest in workout.workoutslist.exercises |filter:{workoutId: workoutId}">
{{ workoutTest.exerciseName }}
</li>
我在第二段代码中是否完全相同? 编辑:Plunker:http://plnkr.co/edit/1VQBkuTWAVatexPMsxOd?p=preview
答案 0 :(得分:3)
问题解释:
这是有效的,因为它针对单次锻炼的练习:
workoutTest in workout.workoutslist[0].exercises
这不起作用:
workoutTest in workout.workoutslist.exercises | filter:{workoutId: workoutId}
因为过滤器适用于不存在的属性&#34;练习&#34; of workoutlist array 。
解决方案1:
如果你想显示由id 选择的单个锻炼的练习 - 尝试将你的锻炼定义为如下对象:
workouts.workoutslist = {
"1": {
'workoutName': "Maandag",
'exercises': [
{exerciseId: 1, exerciseName: "exercise1"},
{exerciseId: 2, exerciseName: "exercise2"}
]
},
"2": {
'workoutName': "Dinsdag",
'exercises': [
{exerciseId: 3, exerciseName: "exercise3"},
{exerciseId: 4, exerciseName: "exercise4"}
]
}
};
并像这样访问:
exercise in workout.workoutslist[workoutId].exercises
解决方案2:
如果你想显示包含练习列表的训练列表,而不是像这样实现两级列表:
<ul>
<li ng-repeat="w in workout.workoutslist">
<span>{{w.workoutName}}<span>
<ul>
<li ng-repeat="e in w.exercises">{{e.exerciseName}}</li>
</ul>
</li>
</ul>
答案 1 :(得分:1)
你可以像这样重复嵌套数组:
<li ng-repeat="workout in workoutslist">
<ul>
<li ng-repeat="exercise in workout.exercises"></li>
</ul>
</li>
请注意,您拥有的内容要简单得多 - 我也会以不同的方式定义对象。这更容易:
$scope.workoutslist = [];
而不是:
workouts.workoutslist = [];
答案 2 :(得分:0)
看起来你的第二个提取物不起作用。如果我采用第一个示例,我们对ng-repeat
指令中使用的不同元素有以下类型:
workout --> object
workout.workoutslist --> array
workout.workoutslist[0] --> object
workout.workoutslist[0].exercises --> array
使用第二个代码提取执行相同的练习,您将看到它是如何工作的。
workout.workoutlist --> array
workout.workoutlist.exercises --> ???
实际上,我甚至不确定你之后尝试用过滤器做什么(但到目前为止我还没有机会使用AngularJS,所以它可能只是我没有&#39 ;但是我遇到了那种过滤器的使用方法。
如果你只想列出练习,而不是关心包含它们的训练,那么最好的办法就是在你的控制器中定义一个函数,它负责构建exercice对象数组并用{{{ 1}}。当然,您也可以使用嵌套的ng-repeat
,但每个都必须绑定到不同的HTML元素,这可能是您在上下文中无法做到的。
答案 3 :(得分:0)
使用它就像一个简单的嵌套循环.. 更清洁的方式就像......
<li ng-repeat="workout in workoutslist">
<ul>
<li ng-repeat="exercise in workout.exercises"></li>
</ul>
</li>