如何按类别添加搜索（例如）？

Question

How to add a search for example by category ?? How is it connected to filteredUsers ?? Help me please... If just add a filter pagination does not work properly. I do so.But I do not know where to add the filter:

 var app = angular.module('appTelDirectory', []); app.controller('directoryList', function($scope, $filter) { $scope.currentPage = 0; $scope.pageSize = 10; $scope.users = []; $scope.category = [{'name':'cat1'},{'name':'cat2'}] // 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++) { if(i % 2 == 0) { cat = 'cat1' } else cat= 'cat2'; $scope.users.push({'name':'user'+i,'category':''+cat}); } $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"> <span> Категория </span> <select> <option ng-repeat="category in category | filter:answer">{{category.name}}</option> </select> <ul> <li ng-repeat="item in filteredUsers | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}---->>{{item.category}}</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> 

I would be grateful for any help.

Answer 1

Add an ng-model to your select.

<select ng-model="selectedCat">
    <option ng-repeat="category in category | filter:answer">{{category.name}}      </option>
</select>

Add the code to do filter based on category also in the watcher function,

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

// Another watcher to listen change in the selected category
$scope.$watch('selectedCat', function(newValue) {
    // Manually filtering here instead doing in the view
    $scope.filteredUsers = $filter('filter')($scope.users, {$: newValue});
    $scope.filteredUsers = $filter('filter')($scope.filteredUsers, {$: $scope.searchAll});
});