如何添加搜索，例如按类别

How to add a search for example by category?

本文关键字：何添加 添加 搜索      更新时间：2023-09-26

如何按类别添加搜索？？它是如何连接到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>
如果有任何帮助，我将不胜感激。

将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});
});
相关文章：