javascript - 如何在 Firebase 数组中使用 ngTable 分页

Question

我正在尝试使用 ngTable 将我的数组信息组织到一个表中。我知道执行 $scope.laundryData 的长度将返回 0，所以我创建了一个变量($scope.arrayLength)来跟踪来自 Firebase 的数组的长度。问题是表格可以很好地显示分页按钮，但它不进行分页。如果我选择 10 分页按钮，它仍然显示 13 个项目(列表中的所有项目)。我从 ngTable website 得到了 $scope.tableParams .

'use strict';

/**
 * @ngdoc function
 * @name laundrytrackerApp.controller:ReportsCtrl
 * @description
 * # ReportsCtrl
 * Controller of the laundrytrackerApp
 */
angular.module('laundrytrackerApp')
  .controller('ReportsCtrl', function ($scope, $firebaseArray, ngTableParams) {
    var ref = new Firebase("firebase url");
    $scope.laundryData= $firebaseArray(ref);
    //console.log($scope.laundryData.length);

    $scope.laundryData.$loaded().then(function(laundryData) {
        console.log(laundryData.length); // data is loaded here
        $scope.arrayLength = laundryData.length;
    });

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: $scope.arrayLength, // length of data
        getData: function ($defer, params) {
            $defer.resolve($scope.laundryData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    })
  });

这是 View :

<div class="containter text-center">
  <div class="row header">
    <h2>Spending Reports</h1>
  </div>
  <table ng-table="tableParams" class="table">
                <tr ng-repeat="laundry in laundryData | orderBy:'-$id'">
                    <td data-title="'Date'">{{laundry.date}}</td>
                    <td data-title="'User'">{{laundry.user}}</td>
                    <td data-title="'Loads'">{{laundry.loads || '-'}}</td>
                    <td data-title="'Refill'">{{(laundry.refill | currency) || '-'}}</td>
                    <td data-title="'Cost'">{{(laundry.cost | currency) || '-'}}</td>
                    <td data-title="'Balance'">{{(laundry.balance | currency) || '-'}}</td>
                </tr>
  </table>
</div>

Answer 1

尝试在 $data 而不是 $scope.laundryData 上重复:

<table ng-table="tableParams" class="table">
  <tr ng-repeat="laundry in $data | orderBy:'-$id'">
    <td data-title="'Date'">{{laundry.date}}</td>
    <td data-title="'User'">{{laundry.user}}</td>
    <td data-title="'Loads'">{{laundry.loads || '-'}}</td>
    <td data-title="'Refill'">{{(laundry.refill | currency) || '-'}}</td>
    <td data-title="'Cost'">{{(laundry.cost | currency) || '-'}}</td>
    <td data-title="'Balance'">{{(laundry.balance | currency) || '-'}}</td>
  </tr>
</table>

我相信 $data 被 ngTable 内部使用来跟踪分页数组。