angularJS 简单合并单元格使用 ng-repeat-start 指令
梦想还是要有的，就算实现不了，但还有一段难忘的经历。
这不，今天在做单元格的合并，想了一上午，终于将该问题解决。解决思路便是使用 ng-rapeat-start 与 ng-rapeat-end 指令。
先上一张效果图：
首先，我们需要后台返回的数据是这样的，要求返回的数据是一个数组，而每一个数组里面包含了，合并的列以及一个数组，结构如下：
var data = [
{
"nian": "一年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
},
{
"nian": "二年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
},
{
"nian": "三年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
}
];
其次，我们循环数据时，先循环出第一行记录，然后循环出该合并单元格的其他行记录，而我们的 html 是如下操作数据的：
<table ng-controller="repeatController" border="1">
<thead>
<td>年级</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr ng-repeat-start="group in list">
<td rowspan="{{group.item.length}}">{{group.nian}}</td>
<td>{{group.item[0].name}}</td>
<td>{{group.item[0].age}}</td>
</tr>
<tr ng-repeat-end ng-repeat="single in group.item" ng-hide="$first">
<td>{{single.name}}</td>
<td>{{single.age}}</td>
</tr>
</tbody>
</table>
最后，附上所有的代码，以供参考：
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
</head>
<body>
<table ng-controller="repeatController" border="1">
<thead>
<td>年级</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr ng-repeat-start="group in list">
<td rowspan="{{group.item.length}}">{{group.nian}}</td>
<td>{{group.item[0].name}}</td>
<td>{{group.item[0].age}}</td>
</tr>
<tr ng-repeat-end ng-repeat="single in group.item" ng-hide="$first">
<td>{{single.name}}</td>
<td>{{single.age}}</td>
</tr>
</tbody>
</table>
<script>
var data = [
{
"nian": "一年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
},
{
"nian": "二年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
},
{
"nian": "三年级",
"item": [
{
"name": "张三",
"age": "23"
},
{
"name": "张三",
"age": "23"
}
]
}
];
repeatController = function ($scope){
$scope.list = data;
}
repeatController.$inject = ['$scope'];
angular.module('myapp',[]).controller('repeatController',repeatController);
</script>
</body>
</html>
注：angularJS合并单元格，还有一种方法，那就是使用循环指令中的 $index 属性，此种方法日后再说。而我们上面的方法是使用了 $first 属性。
1 条评论发表在 “angularJS 简单合并单元格使用 ng-repeat-start 指令”
斌哥,angular了,这个厉害了!