ng-repeat实现另类table数据展示

$scope.data = [
  {name: '月份', list: [1,2,3,4,5,6,7,8,9,10,11,12]},
  {name: '文学类', list: [11,12,13,14,15,16,17,18,19,110,111,112]},
  {name: '哲学类', list: [111,112,113,114,115,116,117,118,119,1110,1111,1112]},
];

使用如上的数据和ng-repeat指令实现如图所示的效果。

效果图

  • 我的思路:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <table border="1">
        <tr>
            <th ng-repeat="item in data track by $index">{{item.name}}</th>
        </tr>
        <tr ng-repeat="(key, value ) in data[0].list track by $index">
            <td ng-repeat="item in data track by $index">{{item.list[key]}}</td>
        </tr>
    </table>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.data = [
            {name: '月份', list: [1,2,3,4,5,6,7,8,9,10,11,12]},
            {name: '文学类', list: [11,12,13,14,15,16,17,18,19,110,111,112]},
            {name: '哲学类', list: [111,112,113,114,115,116,117,118,119,1110,1111,1112]},
            ];
    });
</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容