Angularjs ng-repeat array in array

Question

I want to show an array from another array in a list. I want to use ng-repeat to show the array in a list. I´ve tried all sorts of combinatins, but i can't make it work. I have the following code:

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"}  
                    ]
        }
    ];

This works:

<li class="item" ng-repeat="workoutTest in workout.workoutslist[0].exercises">{{ workoutTest.exerciseName }}
            </li>

But this doesn't:

    <li class="item" ng-repeat="workoutTest in workout.workoutslist.exercises  |filter:{workoutId: workoutId}">
{{ workoutTest.exerciseName }}
                </li> 

Am i not saying exactly the same in my second code?
EDIT: Plunker: http://plnkr.co/edit/1VQBkuTWAVatexPMsxOd?p=preview

Answer 1

Problem explanation:

This works because it targets exercises of single workout:

workoutTest in workout.workoutslist[0].exercises

This not works:

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

because filter applied to nonexistent property "exercises" of workoutlist array.

Solution 1:

If you want to display exercises of single workout selected by id - try to define your workouts as object like this:

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"}  
        ]
    }
};

and access it like this:

exercise in workout.workoutslist[workoutId].exercises

Solution 2:

If you want to display list of workouts that contain lists of exercises than implement two-level list like this:

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