如何在AngularJS的ng-repeat中实现多字段OR逻辑过滤？

嘿，我来帮你搞定这个问题～你想要实现的是OR逻辑过滤（只要用户的姓氏surname是foo，或者名字name是foo，就保留该条目），但默认的对象式过滤器是AND逻辑，而且你写的语法也不符合AngularJS的规则，下面给你两种可行的解决方案：

方案1：使用数组形式的过滤器（最简单） #

AngularJS的filter指令支持传入数组，数组中的每个元素代表一个过滤条件，这些条件之间是OR关系（满足任意一个即可）。直接把两个字段的过滤条件放到数组里就行：

<li ng-repeat="person in persons | filter:[{surname: 'foo'}, {name: 'foo'}]">
  {{person}}
</li>

如果你的搜索词是动态的（比如来自用户输入），也可以绑定变量：

<!-- 先加一个输入框绑定搜索词 -->
<input type="text" ng-model="searchText" placeholder="搜索姓名或姓氏">

<li ng-repeat="person in persons | filter:[{surname: searchText}, {name: searchText}]">
  {{person}}
</li>

方案2：自定义过滤函数（更灵活） #

如果以后需要更复杂的过滤逻辑（比如增加更多字段、模糊匹配的规则调整等），可以在控制器里写一个自定义过滤函数，完全自己控制判断逻辑：

第一步：在控制器中定义过滤函数 #

angular.module('yourAppName').controller('YourController', function($scope) {
  // 假设你的persons数据在这里
  $scope.persons = [...];

  // 自定义过滤函数：匹配姓氏或名字
  $scope.filterByNameOrSurname = function(person) {
    // 这里可以换成动态绑定的$scope.searchText，支持用户输入
    const searchTerm = 'foo';
    // OR逻辑判断：只要满足一个条件就返回true
    return person.surname.includes(searchTerm) || person.name.includes(searchTerm);
    // 如果需要精确匹配，就用 === 代替 includes
    // return person.surname === searchTerm || person.name === searchTerm;
  };
});

第二步：在模板中使用这个函数 #

<li ng-repeat="person in persons | filter:filterByNameOrSurname">
  {{person}}
</li>

这样就能完美实现你想要的OR逻辑过滤啦～

内容的提问来源于stack exchange，提问作者F. Ception