Question

我发现了很多类似的问题，但不幸的是，他们中没有人为我做这个工作，我想知道我怎么能在ng-repeat的最后一个td内移动到下一行？请考虑我的CSS技能绝对为零。

                        <table>
                        <thead>
                            <tr>
                                <th>Column1</th>
                                <th>Column2</th>
                                <th>Column3</th>
                                <th>Column4</th>
                                <th>Column5</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="items in ItemsList">
                            <tr ng-repeat="pItem in items.Items">
                                <td>{{pItem.Item1}}</td>
                                <td>{{pItem.Item2 }}</td>
                                <td>{{pItem.Items3 }}</td>
                                <td>{{pItem.Item4 }}</td>
                                <td>{{pItem.Item5 }}</td>
                                <td>{{pItem.Item6 }}</td>
                            </tr>
                        </tbody>
                    </table>

pItem.Item6是我要移动到下一行的列（只有一列的行跨越到完整的行大小）。

我希望Item6位于下一行，如下所示。

Answer 1

可能你想要这个

＆＃13;

<table>
    <tbody ng-repeat="items in ItemsList">
        <tr ng-repeat="pItem in items.Items">
            <td>
                <table>
                    <thead ng-if="$first && $parent.$first">
                       <tr>
                           <th>Column1</th>
                           <th>Column2</th>
                           <th>Column3</th>
                           <th>Column4</th>
                           <th>Column5</th>
                       </tr>
                    </thead>
                    <tr>
                        <td>{{pItem.Item1}}</td>
                        <td>{{pItem.Item2 }}</td>
                        <td>{{pItem.Item3 }}</td>
                        <td>{{pItem.Item4 }}</td>
                        <td>{{pItem.Item5 }}</td>
                    </tr>
                    <tr>
                        <td colspan="5">{{pItem.Item6 }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 2

    <table>
    <tbody ng-repeat="items in ItemsList">
        <tr ng-repeat="pItem in items.Items">
            <td>
                <table>
                    <thead>
                        <tr>
                            <th>Column1</th>
                            <th>Column2</th>
                            <th>Column3</th>
                            <th>Column4</th>
                            <th>Column5</th>
                       </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{pItem.Item1}}</td>
                            <td>{{pItem.Item2 }}</td>
                            <td>{{pItem.Items3 }}</td>
                            <td>{{pItem.Item4 }}</td>
                            <td>{{pItem.Item5 }}</td>
                        </tr>
                        <tr>
                            <td colspan="5">{{pItem.Item6 }}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

上面我已经将thead从外部表移动到内部表的tbody，它现在正在工作但是现在已经开始为每一行显示标题

Answer 3

您可以处理控制器中的数据，使数据结构成为一个平面数组。

控制器内部：

$scope.rows = [];

angular.forEach($scope.ItemsList, function(items){
    angular.forEach(items.Items, function(pItem){
        $scope.rows.push(pItem);
    });
});

此数据结构的html将是：

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
            <th>Column5</th>
        </tr>
    </thead>
    <tbody ng-repeat="row in rows">
        <tr>
            <td>{{row.Item1}}</td>
            <td>{{row.Item2 }}</td>
            <td>{{row.Item3 }}</td>
            <td>{{row.Item4 }}</td>
            <td>{{row.Item5 }}</td>
        </tr>
        <tr>
            <td colspan="5">{{row.Item6 }}</td>
        </tr>
    </tbody>
</table>

在ng-repeat元素

3 个答案: