AngularJS实现三级Table列表
angular.module('yo03App') .controller('MyrouteCtrl', function ($scope) { $scope.professors = [{ 'name': 'Albert Einstein', 'count':'5', 'classes': [{ 'name': 'Physics 101', 'students': [{ 'name': 'Joe', 'grade': 'B' }, { 'name': 'Mary', 'grade': 'A' }] }, { 'name': 'Physics 201', 'students': [{ 'name': 'Gunther', 'grade': 'C' }, { 'name': 'Hans', 'grade': 'C' }, { 'name': '哈哈哈', 'grade': 'B' }] }] }, { 'name': 'Charles Darwin', 'count':'4', 'classes': [{ 'name': 'Biololgy 101', 'students': [{ 'name': 'Danielle', 'grade': 'A' }, { 'name': 'Anne', 'grade': 'A' }] }, { 'name': 'Biology 201', 'students': [{ 'name': 'Frida', 'grade': 'A' }, { 'name': 'Fritz', 'grade': 'F' }] }] }]; });
注意:count可以通过后台计算组装,前台也可以通过JS计算。
<table> <tbody> <tr ng-repeat-start="p in professors" ng-if="false"></tr> <tr ng-repeat-start="c in p.classes" ng-if="false"></tr> <tr ng-repeat="s in c.students"> <th ng-if="$parent.$first && $first" rowspan="{{p.count}}"> {{p.name}} </th> <th ng-if="$first" rowspan="{{c.students.length}}">{{c.name}}</th> <td>{{s.name}}</td> <td>{{s.grade}}</td> </tr> <tr ng-repeat-end ng-if="false"></tr> <!-- classes --> <tr ng-repeat-end ng-if="false"></tr> <!-- professors --> </tbody> </table>