javascript - 如何添加搜索(例如按类别)？

Question

如何添加搜索，例如按类别搜索？它如何连接到filteredUsers？请帮助我...如果仅添加过滤器分页无法正常工作。我这样做了。但我不知道在哪里添加过滤器:

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>

如果有任何帮助，我将不胜感激。

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