<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table {
text-align: center;
}
td {
border: 1px solid #000;
width: 100px;
height: 20px;
}
.hidden {
display: none;
}
tr:nth-child(even) {
background-color: gray;
}
</style>
</head>
<body ng-app="myModule" ng-controller="myController">
<table>
<thead></thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[0].value}}</td>
<td ng-repeat="(key,item) in row" ng-class="{hidden: key==0||key==row.length-1? true: ''}">{{item.value}}</td>
<td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[row.length-1].value}}</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="../node_modules/angular/angular.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.controller('myController', ["$scope","$filter",function ($scope,$filter) {
$scope.rows = [
[
{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"4","column":{"filed":"lxjp_count","text":"数量"}}
],
[{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
{"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
{"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
{"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
{"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
{"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
[{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
{"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
{"value":"260","column":{"filed":"lxjp_count","text":"数量"}}]];
/*
$scope.rows = [
[{column:{filed:'createUser',text:'创建用户'},value:'test'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'1'}
],
[{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'2'}
],
[{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'2'}
],
[{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'3'}
],
[{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'3'}
],
[{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
{column:{filed:'updateTime',text:'更新时间'},value:'22222'},
{column:{filed:'haha',text:'哈哈'},value:'333'},
{column:{filed:'ww',text:'问问'},value:'4444'},
{column:{filed:'ee',text:'嗯嗯'},value:'444'},
{column:{filed:'createUser_count',text:'数量'},value:'3'}
]
];*/
$scope.arr = [];
$scope.circulate = $scope.rows.length;
for( var i = 0; i < $scope.circulate; i++){
var tep = $scope.rows[i] //第二层数组
//取第二层数组中最后一个对象中的value值，该值用于设置表格合并的数量
$scope.arr[i] = tep[ tep.length - 1 ].value;
i += $scope.arr[i]-1;//数组的下一个需要记值的索引
}
}]);
</script>
代码效果如下图：
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。
能做事的做事，能发声的发声。
有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火。
此后如竟没有炬火：我便是唯一的光。
——鲁迅
