如何在分頁時進行正確搜索

Question

我無法理解。如何在分頁時進行正確的搜索？ 英文寫作不好。 我這樣做：

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); 
 
    } 
 
});

<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 users | filter:searchAll | 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 >= users.length/pageSize - 1" ng-click="currentPage=currentPage+1"> 
 
    Next 
 
    </button> 
 
</div>

如何更改項目的數量，取決於用戶列表上。 NumberOfPages不變...

Answer 1

您可以像這樣使用單獨的列表。基本上，我使用另一個列表filteredUsers。現在，我不是在視圖中使用過濾器，即filter:searchAll，我正在使用$watch中的基本$filter服務執行相同的操作，該操作將在我在該字段中鍵入時調用。

現在，我們始終在filteredUsers範圍變量中擁有過濾用戶，因此您現在可以根據$scope.filteredUsers而不是$scope.users進行進一步計算。

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); 
 
    } 
 
});

<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>