美文网首页
AngularJS实现三级Table列表(网上找到的)

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

作者: 懵懵圈 | 来源:发表于2020-10-20 18:49 被阅读0次
      $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

    相关文章

      网友评论

          本文标题:AngularJS实现三级Table列表(网上找到的)

          本文链接:https://www.haomeiwen.com/subject/poadmktx.html