Как добавить поиск по категориям?

Question

Как добавить поиск по категориям? Как это связано с фильтрами? Помогите мне пожалуйста ... Если просто добавить постраничную разбивку фильтра, это не сработает. Я so.But я не знаю, где, чтобы добавить фильтр:

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++) { 
 
    \t 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>

Я был бы признателен за любую помощь.

Answer 1

Добавить ng-model по вашему выбору.

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

Добавьте код, чтобы сделать фильтр, основанный на категории и в функции watcher,

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