如何在分页时进行正确的搜索

Question

我无法理解。如何在分页时进行正确的搜索？ 糟糕写作的英语。 我这样做了：

attached()

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

app.controller('directoryList', function($scope) {
  
  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.users = [{}]
  
  $scope.numberOfPages = function() {
    return Math.ceil($scope.users.length / $scope.pageSize);
  }
  
  for (var i = 0; i < 45; i++) {
    $scope.users.push({
      'name': 'user' + i
    });
  }
});

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});

如何更改项目数，具体取决于用户列表。 NumberOfPages不变......

Answer 1

您可以像这样使用单独的列表。基本上，我使用了另一个列表filteredUsers。现在我没有在视图中使用过滤器filter:searchAll，而是使用$filter中的基础$watch服务做同样的事情，当我在字段中输入时将调用该服务

现在，我们始终在filteredUsers范围变量中包含已过滤的用户，因此您现在的进一步计算可以基于$scope.filteredUsers而不是$scope.users。

＆＃13;

＆＃13;

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

app.controller('directoryList', function($scope, $filter) {

  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.users = [{}];
  
  // Using a separate list of filtered users
  $scope.filteredUsers = [{}];

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

  for (var i = 0; i < 45; i++) {
    $scope.users.push({
      'name': 'user' + i
    });
  }

  $scope.filteredUsers = angular.copy($scope.users);

  $scope.$watch('searchAll', function(newValue) {
    // Manually filtering here instead doing in the view
    $scope.filteredUsers = $filter('filter')($scope.users, {$: newValue});
  });
});

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appTelDirectory" ng-controller="directoryList">
  <input placeholder="Поиск..." ng-model="searchAll" class="form-control">
  <ul>
    <li ng-repeat="item in filteredUsers | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}</li>
  </ul>

  <table>
    <tr ng-repeat="item in users | startFrom:currentPage*pageSize | limitTo:pageSize">
  </table>

  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>

  {{currentPage+1}}/{{numberOfPages()}}

  <button ng-disabled="currentPage >= filteredUsers.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;