Angularjs ng-在数组中重复数组

Question

我想在列表中显示另一个数组中的一个数组。我想使用 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

Answer 1

问题解释：

之所以有效，是因为它针对 单次锻炼:

workoutTest in workout.workoutslist[0].exercises

这行不通：

workoutTest in workout.workoutslist.exercises | filter:{workoutId: workoutId}

因为 过滤器应用于不存在的属性 "exercises" 锻炼列表数组 。

解决方案一：

如果你想显示由 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

方案二：

如果您想显示包含练习列表的锻炼列表，而不是像这样实现两级列表：

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

Answer 2

您可以像这样 ng-repeat 嵌套数组：

<li ng-repeat="workout in workoutslist">
  <ul>
    <li ng-repeat="exercise in workout.exercises"></li>
  </ul>
</li>

请注意，它比您拥有的要简单得多 - 我也会以不同的方式定义对象。这更容易：

$scope.workoutslist = [];

而不是：

workouts.workoutslist = [];

JSFiddle

Answer 3

您的第二次提取似乎无法正常工作。如果我举第一个例子，我们有以下类型用于您的 ng-repeat 指令中使用的不同元素：

workout --> object
workout.workoutslist --> array
workout.workoutslist[0] --> object
workout.workoutslist[0].exercises --> array

对第二个代码摘录做同样的练习，您会发现它是如何不起作用的。

workout.workoutlist --> array
workout.workoutlist.exercises --> ???

实际上，我什至不确定你在那之后想用过滤器做什么（但到目前为止我还没有机会使用 AngularJS 那么多，所以可能就是这样我还没有遇到过那种使用过滤器的情况。

如果您只想列出练习，而不关心包含它们的锻炼，最好的办法可能是在您的控制器中定义一个函数，该函数负责构建练习对象数组并将其与ng-repeat。当然，您也可以使用嵌套的 ng-repeat，但每个都必须绑定到不同的 HTML 元素，这在您的上下文中可能无法做到。

Answer 4

像简单的嵌套循环一样使用它.. 更简洁的方法就像...

<li ng-repeat="workout in workoutslist"> <ul> <li ng-repeat="exercise in workout.exercises"></li> </ul> </li>

Angularjs ng-在数组中重复数组

Angularjs ng-repeat array in array

angularjs

angularjs-ng-repeat