2016-12-30 87 views
1

我的角JS分页程序和选择选项不起作用right.Here是代码:角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> 

变种应用= angular.module( 'myBookscatApp', [])。控制器( 'BooksListCtrl',函数($范围,$ 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用户:来宾,密码:测试

很多thanx!

回答

0

您可以使用this指令进行分页。它有很多你不必自己写的功能。