angularjs - 在 ng-repeat 元素内的新行上的表格中显示 tr 的最后一个 td

标签 angularjs asp.net-mvc css

我发现了很多类似的问题,但不幸的是,没有一个问题适合我,我想知道如何将 ng-repeat 的 tbody 中的最后一个 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 是我要移动到下一行的列(只有一列跨越到完整行大小的行)。

I want Item6 to be on the next row

我希望 Item6 位于下一行,如下所示。 enter image description here

最佳答案

也许你想要这个

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

关于angularjs - 在 ng-repeat 元素内的新行上的表格中显示 tr 的最后一个 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38524589/

相关文章:

c# - Asp.Net MVC 默认路由

javascript - 未选中特定复选框按钮时如何不显示 div 区域?

html - 图片下方的文字环绕

javascript - 为什么我的 Angular 前端不能将正确的 $http.get 参数传递给 Django 后端?

javascript - 如何在 Angular 中使用表单名称来获取输入数据?

asp.net-mvc - ASP.Net MVC 显示格式

javascript - 仅在一个部分实现整页js效果

javascript - HTTP POST 调用未选取传递给正文的最新值

javascript - AngularJS,用按钮清除输入文本

asp.net-mvc - 通过路由的 ASP.NET MVC 博客 URL