zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    python 开发中的常用功能
    python 栈&队列&列表的区别
    python 内置函数简介及其作用
    python 正则表达式详解
    python scrapy
    python 文件操作
    python 爬虫实例
    浅谈tcp 与udp
    php正则匹配video 中或者img的宽度和高度。
    android技术积累:开发规范
  • 原文地址:https://www.cnblogs.com/yshyee/p/9271689.html
Copyright © 2011-2022 走看看