过滤后刷新分页

Question

我已经实现了一个基于条件函数的分页和过滤器：JSBin:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
  </head>
  <body>
    <section class="main" ng-controller="contentCtrl">    
      <div style="float: right; margin-right: 200px">
        has more than 3 letters <input type="checkbox"  ng-model="criteria.number" ng-true-value="3" ng-false-value="null" /><br>
      </div>

      <h3>Existing friends</h3>
      <div ng-repeat="friend in filteredFriends | filter: criteriaMatch(criteria)">
        {{friend.name}}
      </div>
      <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
    </section>
  </body>
</html>

JavaScript:

var app = angular.module('plunker', ['ui.bootstrap']);

app.factory('friendsFactory', function() {
  var o = {
    friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"}, 
               {"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"}, 
               {"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
               {"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
               {"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
  };

  return o;
});

app.controller('contentCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.friends;

  $scope.totalItems = $scope.friends.length;
  $scope.itemsPerPage = 5
  $scope.currentPage = 1;

  function refresh() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.filteredFriends = friendsFactory.friends.slice(begin, end);
    $scope.totalItems = $scope.friends.length;
  }

  $scope.criteria = { number: "null" };
    $scope.criteriaMatch = function (cri) {
        return function (friend) {
            return ((cri.number === "null") || (friend.name.length > cri.number));
        };
    };

  $scope.$watch('currentPage', refresh);

});

问题是，在选择过滤器后，它会显示长度大于 3 一页一页的名称。我想要的是，它应该重新计算页数，并保持每页显示5个好名字。

有大佬知道怎么修改程序实现吗？

此外，如果我将 "null" 替换为 null，它在选择和取消选择过滤器后将不起作用。有谁知道为什么？

PS：与有很大区别；不是重复...

Answer 1

这是一个解决方案：JSBin:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta name="description" content="filter and pagination 1">
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
  </head>
  <body>
    <section class="main" ng-controller="contentCtrl">    
      <div style="float: right; margin-right: 200px">
        has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="0" /><br>
      </div>

      <h3>Existing friends</h3>
      <div ng-repeat="friend in filteredFriends | start: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
        {{friend.name}}
      </div>
      <pagination total-items="filteredFriends.length" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
    </section>
  </body>
</html>

JavaScript:

var app = angular.module('plunker', ['ui.bootstrap']);

app.factory('friendsFactory', function() {
  var o = {
    friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"}, 
               {"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"}, 
               {"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
               {"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
               {"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
  };

  return o;
});

app.controller('contentCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.friends;

  $scope.criteria = { number: 0 }
  $scope.filteredFriends = $scope.friends;
  $scope.itemsPerPage = 5
  $scope.currentPage = 1;

  function refresh() {
    $scope.filteredFriends = $scope.friends.filter(function(item){
      return item.name.length > $scope.criteria.number;
    })
  };

  $scope.$watch('currentPage', refresh);
  $scope.$watch('criteria.number', refresh);
});

app.filter('start', function () {
  return function (input, start) {
    if (!input || !input.length) { return; }

    return input.slice(start);
  };
});

过滤后刷新分页

Refresh the pagination after filtering

angularjs

angular-ui-bootstrap

angularjs-filter