AngularJS多筛选值OR操作：如何在对应输入框展示搜索内容？

嘿，我来帮你搞定这两个AngularJS筛选的需求——多条件的OR逻辑筛选，还有把全局搜索框的内容同步到各个单独的输入框里。下面是具体的实现方案：

一、自定义OR逻辑的过滤器 #

AngularJS自带的filter默认是AND逻辑（所有条件都匹配才会显示），要实现OR逻辑（只要有一个条件匹配就显示），我们需要自定义一个过滤器：

angular.module('app', [])
.controller('MainCtrl', function($scope) {
  // 模拟你的数据列表
  $scope.list = [
    {name: 'Alice', age: 25, gender: 'female'},
    {name: 'Bob', age: 30, gender: 'male'},
    {name: 'Charlie', age: 22, gender: 'male'},
    {name: 'Diana', age: 28, gender: 'female'}
  ];

  // 初始化单独筛选的模型
  $scope.name = {name: ''};
  $scope.age = {age: ''};
  $scope.gender = {gender: ''};
})
// 自定义多条件OR过滤器
.filter('multiFilter', function() {
  return function(items, filters) {
    // 如果没有任何筛选条件，直接返回全部数据
    if (!filters || Object.keys(filters).every(key => !filters[key])) {
      return items;
    }
    // 遍历每条数据，只要有一个条件匹配就保留
    return items.filter(item => {
      return Object.keys(filters).some(key => {
        const filterVal = filters[key];
        if (!filterVal) return false;
        // 处理不同类型的匹配：数字直接比较，字符串忽略大小写
        if (typeof item[key] === 'number') {
          return item[key] == filterVal;
        } else {
          return item[key].toLowerCase().includes(filterVal.toLowerCase());
        }
      });
    });
  };
});

二、同步全局搜索内容到单独输入框 #

要让全局搜索框的内容自动填充到对应的单独输入框，我们可以用$scope.$watch监听全局搜索模型的变化，然后根据内容类型分配到对应的字段：

在控制器里添加这段代码：

// 监听全局搜索框的变化，同步到单独输入框
$scope.$watch('search', function(newVal) {
  if (!newVal) {
    // 清空所有单独输入框
    $scope.name.name = '';
    $scope.age.age = '';
    $scope.gender.gender = '';
    return;
  }
  // 按空格拆分搜索词（你可以根据需求调整拆分规则）
  const terms = newVal.split(/\s+/);
  // 先重置所有单独输入框
  $scope.name.name = '';
  $scope.age.age = '';
  $scope.gender.gender = '';
  // 遍历每个搜索词，判断匹配哪个字段
  terms.forEach(term => {
    // 判断是否是年龄（数字）
    if (!isNaN(term)) {
      $scope.age.age = term;
    } else if (['male', 'female'].includes(term.toLowerCase())) {
      // 判断是性别
      $scope.gender.gender = term.toLowerCase();
    } else {
      // 默认匹配姓名
      $scope.name.name = term;
    }
  });
});

三、修改HTML部分 #

把原来的ng-repeat里的过滤器替换成我们自定义的multiFilter，绑定各个单独筛选的模型：

<div ng-app="app" ng-controller="MainCtrl">
  <input type="text" ng-model="search" placeholder="search name, age or gender"><br/>
  <input type="text" ng-model="name.name" placeholder="search name"><br/>
  <input type="text" ng-model="age.age" placeholder="search age"><br/>
  <input type="text" ng-model="gender.gender" placeholder="search gender"><br/>
  
  <ul>
    <li ng-repeat="item in list | multiFilter: {name: name.name, age: age.age, gender: gender.gender}">
      {{item.name}} - {{item.age}} - {{item.gender}}
    </li>
  </ul>
</div>

功能说明 #

• OR筛选：现在你在任意一个单独输入框里填内容，或者在全局搜索框里输入多个关键词，只要数据匹配其中一个条件就会显示。比如输入"25 male"，会显示年龄25的Alice和性别为male的Bob、Charlie。
• 搜索内容同步：在全局搜索框输入内容时，系统会自动判断内容类型，把数字放到年龄框，性别词放到性别框，其他内容放到姓名框。清空全局搜索框时，所有单独输入框也会跟着清空。

你可以根据自己的实际数据和需求，调整过滤器里的匹配逻辑，或者搜索词的拆分规则哦。

内容的提问来源于stack exchange，提问作者Pure Rhymer Organization