AngularJS实现三级Table列表(网上找到的)

  $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'
                    }]
                }]
            }];
<table class="table table-bordered">
    <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>

转载于:https://www.cnblogs.com/yshyee/p/9271689.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。