对表格同类项合并排序的angular代码
gooood个人博客网站
数组
angular
执行效果：
html代码：
<!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> <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> <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>