javascript - Angular JS 分页

Question

我的 Angular JS 分页器，选择选项无法正常工作。代码如下:

    <select class="select" ng-model="pageSize">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="50">50</option>
        <option value="100">100</option>
        </select> / {{ books.length }} &nbsp; &nbsp; <button class="paginator" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Előző
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button class="paginator" ng-disabled="currentPage >= books.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Következő
    </button></span>&nbsp; &nbsp; 
    <i class="fa fa-sort-numeric-asc floatright" aria-hidden="true"></i><input type="checkbox" data-ng-model="order.reverse"/>&nbsp; &nbsp;&nbsp; &nbsp;

           <button id="help" type="button" data-toggle="modal" data-target="#myModal" title="SÚGÓ"><i class="fa fa-question-circle" aria-hidden="true"></i></button></h1>
        </div>
          <div class="panel-heading">

           </div>
<table class="table table-bordered">
  <thead>
    <tr>
    <th></th>
      <th>Név</th>
      <th>Dátum</th>
      <th>Típus</th>
      <th>Összeg</th>
      <th>Megjegyzés</th>
    </tr>
  </thead>
  <tbody>
  <tr data-ng-repeat="user in books.slice(currentPage*pageSize, (currentPage*pageSize)+PageSize | orderBy:dynamicOrder:order.reverse | filter:query">
                <td><input type="checkbox" id="chk" ng-model="user.done"></td>

                <td style="display:none;"><span class="done-{{item.done}}"> {{user.id}}</span></td>
                <td style="background-color:{{user.money>0?'#EAE6E6':''}}"><span class="done-{{user.done}}"> {{user.name}}</span></td>
                <td style="background-color:{{user.money>0?'#EAE6E6':''}}"><span class="done-{{user.done}}"> {{user.date}}</span></td>
                <td style="background-color:{{user.money>0?'#EAE6E6':''}}"><span class="done-{{user.done}}"> {{user.type}}</span></td>
                <td style="background-color:{{user.money>0?'#EAE6E6':''}}"><span class="done-{{user.done}}"> {{user.money}}</span></td>
                <td style="background-color:{{user.money>0?'#EAE6E6':''}}"><span class="done-{{user.done}}"> {{user.etc}}</span></td>
                </tr>

            </tbody>
        </table>

var app=angular.module('myBookscatApp', []).controller('BooksListCtrl', function($scope, $http) {

    $scope.currentPage = 0;
    $scope.pageSize = 10;


    $scope.numberOfPages=function(){
        return Math.ceil($scope.books.length/$scope.pageSize);                
    }

    $scope.order = {
        field: 'date',
        reverse: false
    };
    $scope.reverseOrder = false;
}

工作中可以看到:enter link description here用户:guest，密码:test

非常感谢!

Answer 1

您可以使用this分页指令。它有很多功能，您不必自己编写。