在表格中使用多个ngrepeat时如何避免多个tbody

Question

DEMO: http://jsfiddle.net/6dJ79/1/

The demo above works, however it achieves the results by repeating tbody. I'm wanting to avoid this.

Is there any other way that I can have a row for each color, for each person without repeating tbody? Ideally I'm wanting to have the output look like below without manipulating the data.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Color</th>
            <th>Fav</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bill</td>
            <td>red</td>
            <td>yes</td>
        </tr>
        <tr>
            <td>Bill</td>
            <td>blue</td>
            <td>no</td>
        </tr>
        <tr>
            <td>Larry</td>
            <td>purple</td>
            <td>yes</td>
        </tr>
        <tr>
            <td>Larry</td>
            <td>yellow</td>
            <td>no</td>
        </tr>
    </tbody>
</table>

The data:

{
    name: 'Bill',
    colors: [{
        name: 'red',
        favColor: 'yes'
    }, {
        name: 'blue',
        favColor: 'no'
    }]
}, {
    name: 'Larry',
    colors: [{
        name: 'purple',
        favColor: 'yes'
    }, {
        name: 'yellow',
        favColor: 'no'
    }]
}

Answer 1

Here is an implementation using filter.

myApp.filter('denormalize', function(){
    return function(people) {
        var arr = [];
        angular.forEach(people, function(person){
            angular.forEach(person.colors, function(color){
                arr.push({
                    name: person.name, 
                    color: color.name, 
                    fav: color.favColor
                });
            });
        });

        return arr;
    }
});

In html:

<tbody>
    <tr ng-repeat="person in people | denormalize">
        <td>{{ person.name }}</td>
        <td>{{ person.color }}</td>
        <td>{{ person.fav }}</td>
    </tr>
</tbody>

Answer 2

I would create a function on your scope which would flatten your nested objects into a simple flat array using nested loops.

Here is a working fiddle Scope method:

$scope.peopleColors = function () {
    var pc = [];
    for (var i = 0, plen = $scope.people.length; i < plen; i++) {
        var person = $scope.people[i];
        for (var j = 0, clen = person.colors.length; j < clen; j++) {
            var color = person.colors[j];
            pc.push({
                name: person.name,
                color: color.name,
                favColor: color.favColor
            });
        }
    }
    return pc;
};

Markup:

<tr ng-repeat="pc in peopleColors()">

Edit: I updated the fiddle to show dynamic adding of a new person