如何在 Firebase 数组中使用 ngTable 分页答案

【问题标题】：How to use ngTable pagination with Firebase Array如何在 Firebase 数组中使用 ngTable 分页
【发布时间】：2015-06-30 02:25:32
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript angularjs pagination firebase ngtable

【解决方案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 用来跟踪分页数组。

【讨论】：