过滤后刷新分页答案

【问题标题】：Refresh the pagination after filtering过滤后刷新分页
【发布时间】：2017-06-02 00:38:52
【问题描述】：

我已经实现了基于条件函数的分页和过滤器：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：和this thread很不一样；不是重复...

【问题讨论】：

我看到您的 JSBin 运行良好，您解决问题了吗？
奇怪的是我放错了 JSBin 链接（我刚刚在 OP 中更正了）。确实，我找到了解决方案，如果没有其他答案，我会给出我的答案...
@RahulDesai 我不认为我的 OP 复制了那个线程......

标签： angularjs angular-ui-bootstrap angularjs-filter

【解决方案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);
  };
});

【讨论】：