| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
执行效果：
html代码：
1230博客
<!DOCTYPE html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
默认表格
<table border="1">
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td rowspan="{{item.agespan}}" ng-class="{none: item.agedis}">{{item.age}}</td>
<td rowspan="{{item.likespan}}" ng-class="{none: item.likedis}">{{item.like}}</td>
</tr>
</table>
排序合并后表格
<table border="1">
<tr ng-repeat="item in list2">
<td>{{item.name}}</td>
<td rowspan="{{item.agespan}}" ng-class="{none: item.agedis}">{{item.age}}</td>
<td rowspan="{{item.likespan}}" ng-class="{none: item.likedis}">{{item.like}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl',['$scope', function($scope) {
var data=[
{'name':'Michael Edenfield','age':20,'like':'basketball'},
{'name':'moudrick','age':21,'like':'basketball'},
{'name':'Nick N','age':21,'like':'basketball'},
{'name':'Nick N','age':20,'like':'basketball'},
{'name':'Nickpppp N','age':20,'like':'basketball'},
{'name':'Nicbbk N','age':20,'like':'basketball'},
];
var data2=[
{'name':'Michael Edenfield','age':20,'like':'basketball'},
{'name':'moudrick','age':21,'like':'basketball'},
{'name':'Nick N','age':21,'like':'basketball'},
{'name':'Nick N','age':20,'like':'basketball'},
{'name':'Nickpppp N','age':20,'like':'basketball'},
{'name':'Nicbbk N','age':20,'like':'basketball'},
]
//对数据进行字段排序
$scope.list = data;
function sortNumber(a, b){
return a.age - b.age
}
var list=data2.sort(sortNumber)
//对象新增字段用于表格同类项判断
for (let field in list[0]) {
var k = 0;
while (k < list.length) {
list[k][field + 'span'] = 1;
list[k][field + 'dis'] = false;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][field] == list[i][field] && list[k][field] != '') {
list[k][field + 'span']++;
list[k][field + 'dis'] = false;
list[i][field + 'span'] = 1;
list[i][field + 'dis'] = true;
} else {
break;
}
}
k = i;
}
}
$scope.list2 = list;
}]);
</script>
</html>
<style>
.none{display: none;}
</style>
热门推荐：