AngularJS md-data-table上的分页

Question

我目前正在开发一个从API获取信息的应用程序，然后在表格中显示这些数据。我正在使用旧的AngularJS和md-data-table库。我按照说明操作，我可以设置它并查看我的数据。问题在于分页。当我单击下一步时，它永远不会移动到另一个页面，也不会更改要显示的行数。

这是HTML

<div id="users">

<md-table-container>
    <table md-table multiple md-progress="promise">
        <thead md-head md-order="query.order" md-on-reorder="getData" class="columns">
            <tr md-row>
                <th md-column md-order-by="" flex="10"><span>Email</span></th>
                <th md-column md-numeric md-order-by="" flex="20"><span>Insurance</span></th>
                <th md-column md-numeric flex="20">Policies</th>
                <th md-column md-numeric flex="20">Status</th>
                <th md-column md-numeric flex="10">Extra</th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="user in users | orderBy:'-policyId'">
                <td md-cell flex="10">{{user.email}}</td>
                <td md-cell flex="20">{{user.insuranceName}}</td>
                <td md-cell flex="20"><button class="action-button" ng-click="downloadPolicy(user.policyUrl)" download="user.policyUrl"
                    ng-href="user.policyUrl">Download</button></td>
                <td md-cell flex="20">{{user.status}}</td>
                <td md-cell class="more" flex="10"><md-menu>
                <div ng-click="openMenu($mdMenu, $event)">
                    Ver Más
                </div>
                <md-menu-content>
                    <md-menu-item ng-hide="!user.isPending">
                        <md-button ng-click="details(user.policyId)">
                            <span class="opt-btn">Add Details</span>
                        </md-button>
                    </md-menu-item>
                    <md-menu-item ng-hide="user.isPending">
                        <md-button ng-click="edit(user.policyId)">
                            <span class="opt-btn">Edit</span>
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu></td>
            </tr>
        </tbody>
    </table>
</md-table-container>

<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page"
    md-total="{{users.length}}" md-on-paginate="getData" md-page-select></md-table-pagination>

这是控制器

$scope.users = [];
$scope.totalUsers = 0;
$scope.query = {
    order: 'name',
    limit: 5,
    page: 1
};

var getData = function(){
    console.log("Get data");
    $http({
        method: 'GET',
        url: config.apiUrl+'/policy/all'
    }).then(function successCallback(response) {
        var currentData = response.data
        for(var i=0; i < currentData.length; i++) {
            var current = currentData[i];
            if(current.isPending === true) {
                current.status = "Pending";
            } else if(current.availableUpgrades === false) {
                current.status = "Upgrades Available";
            } else if(current.availableUpgrades === true) {
                current.status = "No Upgrades";
            }

        }

        $scope.users = currentData;
        $scope.totalUsers = currentData.length;

    }, function errorCallback(response) {
        console.log(response);

    });
}

什么不起作用？请任何帮助让我脱离这一点表示赞赏。

Answer 1

我认为这应该有效

$scope.query = {
    order: 'name',
    limit: 5,
    page: 1
};

$http({
        method: 'GET',
        url: config.apiUrl+'/policy/all'
    }).then(function successCallback(response) {
        var currentData = response.data
        for(var i=0; i < currentData.length; i++) {
            var current = currentData[i];
            if(current.isPending === true) {
                current.status = "Pending";
            } else if(current.availableUpgrades === false) {
                current.status = "Upgrades Available";
            } else if(current.availableUpgrades === true) {
                current.status = "No Upgrades";
            }

        }

        $scope.users = currentData;
        $scope.totalUsers = currentData.length;

    }, function errorCallback(response) {
        console.log(response);

    });

<div id="users">

<md-table-container>
    <table md-table multiple md-progress="promise">
        <thead md-head md-order="query.order" md-on-reorder="getData" class="columns">
            <tr md-row>
                <th md-column md-order-by="" flex="10"><span>Email</span></th>
                <th md-column md-numeric md-order-by="" flex="20"><span>Insurance</span></th>
                <th md-column md-numeric flex="20">Policies</th>
                <th md-column md-numeric flex="20">Status</th>
                <th md-column md-numeric flex="10">Extra</th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="user in users | orderBy:'-policyId'">
                <td md-cell flex="10">{{user.email}}</td>
                <td md-cell flex="20">{{user.insuranceName}}</td>
                <td md-cell flex="20"><button class="action-button" ng-click="downloadPolicy(user.policyUrl)" download="user.policyUrl"
                    ng-href="user.policyUrl">Download</button></td>
                <td md-cell flex="20">{{user.status}}</td>
                <td md-cell class="more" flex="10"><md-menu>
                <div ng-click="openMenu($mdMenu, $event)">
                    Ver Más
                </div>
                <md-menu-content>
                    <md-menu-item ng-hide="!user.isPending">
                        <md-button ng-click="details(user.policyId)">
                            <span class="opt-btn">Add Details</span>
                        </md-button>
                    </md-menu-item>
                    <md-menu-item ng-hide="user.isPending">
                        <md-button ng-click="edit(user.policyId)">
                            <span class="opt-btn">Edit</span>
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu></td>
            </tr>
        </tbody>
    </table>
</md-table-container>

<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page"
    md-total="{{users.length}}" md-on-paginate="getData" md-page-select></md-table-pagination>