如何将数组的数组分页为 Material 设计数据 Table angularjs？

Question

我有 table 并且我显示数据，其中包含动态列和数据。作为输入数据，我有一个值数组这是我的 plunker

angular.module('plunker', ['ngMaterial','md.data.table'])
.config(['$mdThemingProvider', function ($mdThemingProvider) {
    'use strict';
    
    $mdThemingProvider.theme('default')
      .primaryPalette('blue');
}])
.controller('MainCtrl', function($scope) {
  var vm = $scope;

  vm.test = '123';
  vm.query = {
        order: 'starttime',
        limit: 25,
        page: 1
    };

    vm.tabQuery = {
        limit: 2,
        page: 1
    };

   
   
  vm.data = {
  "title": "Summary Reports -> manipulate",
  "content": [
    [
      "a1s2",
      "1"
    ],
    [
      "aaa",
      "1"
    ],
    [
      "ccc",
      "1"
    ],
    [
      "eee",
      "1"
    ],
    [
      "ggg",
      "1"
    ],
    [
      "iii",
      "1"
    ],
    [
      "kkk",
      "1"
    ],
    [
      "mmm",
      "1"
    ],
    [
      "ooo",
      "1"
    ],
    [
      "qqq",
      "1"
    ],
    [
      "sss",
      "1"
    ]
  ],
  "columns": [
    "name1",
    "name2"
  ],
  "transactionLogId": 432903
  };

  $scope.name = 'Plunker';

});

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

h1,
p {
  font-family: sans-serif;
}

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
       
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <md-toolbar class="md-table-toolbar md-default">
    <div class="md-toolbar-tools" layout-align="end center">
      <span class="md-subhead">Summary Report</span>
      <div flex></div>
    </div>
    </md-toolbar>
       <md-table-container md-scroll-y layout-fill layout="column" class="md-padding">
            <table class="md-table" md-table md-progress="promise" style="font-size: 11px !important;">
                  <thead md-head>
                      <tr md-row>
                          <th md-column ng-repeat="col in data.columns track by $index"> {{ col }}</th>
                      </tr>
                  </thead>
                  <tbody md-body>
                      <tr md-row ng-repeat="val in data.content track by $index">
                           <td ng-repeat="el in val track by $index"  md-cell ng-bind="el"></td>
                      </tr>
                  </tbody>
                </table>
        </md-table-container>
        <md-table-pagination md-limit="3" md-boundary-links="true" md-limit-options="[5, 10, 15]" md-page="tabQuery.page" md-total="{{(data.content).length}}"></md-table-pagination>
    </div>

    <script src="lib/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.js"></script>
    <script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
  </body>
</html>

我通过数组数组的分页在此 table 中不起作用。

我也试过将这部分添加到 ng-repeat:

"| limitTo: query.limit : (query.page -1) * query.limit"

问题是：AngularJS中有一个table，比如有2列（可能是5列和10列，是动态的）还有动态数据，我带了一个这些列的数组放入 table，例如我取了 2 列和 11 条记录，将它们放入 table 并使它们 table 显示了 3 个项目，但它显示了所有 11 和分页好像不抢，谁能用这个推？

Answer 1

已解决，我已将 | limitTo: query.limit : (query.page -1) * query.limit 添加到 <td ng-repeat="el in val track by $index" md-cell>{{ el }}</td> 并删除了 ng-bind="el"（已更改为 {{ el }}），现在可以正常使用了

如何将数组的数组分页为 Material 设计数据 Table angularjs？

How to paginate array of array to Material Design Data Table angularjs?

javascript

angularjs

material-design