右侧设定范围功能角度

时间:2014-12-22 02:07:18

标签: javascript angularjs

var app=angular.module('MyApp', []);

app.controller("MyControler", function($scope, $http, $filter) {
      $http.get("http://127.0.0.1:8000/cars/?format=json").
        success(function(data) {
              $scope.list = data;
          });
    $scope.currentPage = 0;
    $scope.pageSize = 5;


    $scope.range = function() {
    var rangeSize = 10;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if ( start > $scope.numberOfPages()-rangeSize ) {
      start = $scope.numberOfPages()-rangeSize+1;
    }

    for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
    }
    return ret;
  };

    $scope.numberOfPages=function(){
        var myFilteredData = $filter('filter')($scope.list, $scope.search);
        return Math.ceil(myFilteredData.length/$scope.pageSize);
    };

      $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
    }
  };

  $scope.prevPageDisabled = function() {
    return $scope.currentPage === 0 ? "disabled" : "";
  };

    $scope.nextPage = function() {
    if ($scope.currentPage < $scope.numberOfPages()) {
      $scope.currentPage++;
    }
  };

  $scope.nextPageDisabled = function() {
    return $scope.currentPage === $scope.numberOfPages() ? "disabled" : "";
  };
 $scope.setPage = function(n) {
    $scope.currentPage = n;
  };
});
        <div class="pagination">
            <ul>
              <li ng-class="prevPageDisabled()">
                <a href ng-click="prevPage()">« Prev</a>
              </li>
              <li ng-repeat="n in range()"
              ng-class="{active: n == currentPage}" ng-click="setPage(n)">
              <a href="#">{{n+1}}</a>
            </li>
              <li ng-class="nextPageDisabled()">
                <a href ng-click="nextPage()">Next »</a>
              </li>
            </ul>
          </div>

  </div>







</body>

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 
</html>

所以我试图减少我的代码,我的范围函数设置了分页的可见性,有多少页面,但是当我开始过滤并且结果非常薄,就像剩下的几个对象一样,分页显示我以及带有减号的页面。

我认为这是因为它显示我在过滤时留下了多少页面或未包含哪些页面?

1 个答案:

答案 0 :(得分:1)

  $scope.range = function() {
    var rangeSize = 5;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if ( start > $scope.numberOfPages()-rangeSize ) {
      start = $scope.numberOfPages()-rangeSize;
        if (start < 0) {
            start = 0;
        }
    }

    for (var i=start; i<start+rangeSize && i < $scope.numberOfPages(); i++) {
      ret.push(i);
    }
    return ret;
  };

Okey我找到了解决方案;)