AngularJS 多选下拉框筛选单列数据结果异常问题求助

问题原因 #

AngularJS 原生 filter 过滤器使用对象匹配语法时，不支持直接匹配数组类型的条件。多选下拉框绑定的 Search_by_name 是存储所有选中值的数组，原生过滤器会直接将 item.name 和整个数组做相等匹配，自然没有符合条件的条目，所以返回0条结果。

解决方案 #

有两种常用的实现方式，可根据你的场景选择：

方案1：自定义通用多选过滤器 #

适合多处需要用到多选筛选的场景，复用性高。
首先在模块中注册自定义过滤器：

angular.module('yourApp', [])
.filter('multiSelectMatch', function() {
  return function (items, selectedValues, matchField) {
    // 未选中任何选项时返回全部数据
    if (!selectedValues || selectedValues.length === 0) return items
    // 筛选字段值属于选中值列表的条目
    return items.filter(function (item) {
      // 兼容低版本浏览器写法，高版本可替换为selectedValues.includes(item[matchField])
      return selectedValues.indexOf(item[matchField]) > -1
    })
  }
})
.controller('MyCtrl', function ($scope) {
  $scope.products = [
    {name:"Apple",type:"fruit"},
    {name:"Grape",type:"fruit"},
    {name:"Orage",type:"fruit"},
    {name:"Carrot",type:"vegetable"},
    {name:"Milk",type:"dairy"}
  ]
})

修改HTML中的过滤器调用：

<div ng-controller="MyCtrl">
  <select multiple ng-model="Search_by_name">
    <option value="Apple">Apple</option>
    <option value="Grape">Grape</option>
    <option value="Orage">Orage</option>
    <option value="Carrot">Carrot</option>
    <option value="Milk">Milk</option>
  </select>
  <ul>
    <!-- 传入选中值数组、匹配字段名即可 -->
    <li ng-repeat="item in products | multiSelectMatch:Search_by_name:'name'">
      {{item.name}}
    </li>
  </ul>
</div>

方案2：控制器内写过滤函数 #

适合仅单处使用的场景，无需注册过滤器，代码更精简。
在控制器中新增过滤判断函数：

$scope.matchName = function (item) {
  if (!$scope.Search_by_name || $scope.Search_by_name.length === 0) return true
  return $scope.Search_by_name.indexOf(item.name) > -1
}

修改HTML中ng-repeat的过滤逻辑：

<li ng-repeat="item in products | filter:matchName">
  {{item.name}}
</li>

小提示：你代码里的水果名称Orange拼写为Orage，若实际业务需要可对应修正。

内容的提问来源于stack exchange，提问作者Daniel Ellison