在表中使用多个 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

我会在你的作用域上创建一个函数，它会使用嵌套循环将你的嵌套对象扁平化为一个简单的扁平数组。

这是一个有效的fiddle 范围方法：

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

标记：

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

编辑：我更新了fiddle 以显示新人的动态添加

Answer 2

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>