Angular 合并table单元格

最新推荐文章于 2023-10-19 13:20:03 发布

原创最新推荐文章于 2023-10-19 13:20:03 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #前端 #angular

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在AngularJS应用中实现表格单元格的合并。通过展示具体的HTML和controller.js代码片段，展示了实现这一功能的方法，适用于前端开发者进行界面布局优化。

效果：
在这里插入图片描述
html:

<table class="table table-striped">
    <thead>
        <tr>
            <th>影片名称</th>
            <th>影厅</th>
            <th>放映时间（{{tableDataDate}}）</th>
        </tr>
    </thead>
    <tbody ng-repeat="cinema in tableData">　　　　
        <tr ng-repeat="hall in cinema.hallList track by $index">
            <td ng-if="$index === 0" rowspan={{cinema.hallList.length}}>{{cinema.cinemaName}}</td>
            <td>{{hall.hallName}}</td>
            <td>{{hall.showTime}}</td>
        </tr>
    </tbody>
</table>

controller.js:

$scope.tableDataDate = "2020-08-17";
$scope.tableData = [
    {
        cinemaName: '影片1', hallList: [
            { hallName: '1号厅', showTime: '10:00 10:30 10:00 10:30 10:00 10:30 10:00 10:30 10:00 10:30' },
            { hallName: '2号厅', showTime: '12:00 14:00' }
        ]
    },
    {
        cinemaName: '影片2', hallList: [
            { hallName: '1号厅', showTime: '10:00' },
            { hallName: '2号厅', showTime: '10:20 13:00' }
        ]
    },
    {
        cinemaName: '影片3', hallList: [
            { hallName: '1号厅', showTime: '10:00 10:10 10:30' },
            { hallName: '2号厅', showTime: '11:00 12:00' },
        ]
    }
];