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()));
        }
    })
  });

以下是观点：

<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来跟踪分页数组。

如何对Firebase数组使用ngTable分页

1 个答案: