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

Question

演示:http://jsfiddle.net/6dJ79/1/

上面的演示有效，但是它通过重复 tbody 来实现结果。我想避免这种情况。

有没有其他方法可以让每个人的每种颜色各占一行，而无需重复 tbody？理想情况下，我希望在不处理数据的情况下输出如下所示。

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

数据:

{
    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使用过滤器。

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;
    }
});

在 html 中:

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