如何在AngularJS/Angular5中实现类似SQL LIKE子句的数组过滤？

嘿，这两个问题我刚好有不少实战经验，给你详细拆解一下：

1. AngularJS 实现类似SQL LIKE的数组过滤 #

AngularJS本身就提供了非常方便的内置filter过滤器，默认行为就和SQL的LIKE '%xxx%'类似，直接就能实现包含匹配。

方式一：模板中直接使用内置过滤器 #

如果是在模板里渲染列表，直接结合ng-repeat和filter就能快速搞定：

<!-- 输入框绑定搜索关键词 -->
<input type="text" ng-model="searchKeyword" placeholder="输入关键词">

<!-- 过滤数组并渲染 -->
<ul>
  <li ng-repeat="item in myArray | filter:searchKeyword">
    {{item.name}}
  </li>
</ul>

默认情况下，这个过滤器会检查对象的所有属性是否包含关键词。如果你只想针对name字段过滤，可以指定字段缩小范围：

<li ng-repeat="item in myArray | filter:{name: searchKeyword}">

方式二：在控制器中使用$filter服务 #

如果需要在逻辑代码中处理过滤，注入$filter服务即可：

angular.module('myApp').controller('MyController', function($scope, $filter) {
  $scope.myArray = [...]; // 你的数据源
  $scope.searchKeyword = 'mar';

  // 执行过滤：只匹配name字段包含关键词的项
  $scope.filteredArray = $filter('filter')($scope.myArray, {name: $scope.searchKeyword});

  // 如果需要忽略大小写，可以自定义过滤函数
  $scope.filteredArrayIgnoreCase = $filter('filter')($scope.myArray, function(item) {
    return item.name.toLowerCase().indexOf($scope.searchKeyword.toLowerCase()) !== -1;
  });
});

2. Angular5 实现数组的LIKE过滤 #

Angular5（其实整个Angular 2+系列）出于性能考虑移除了内置的filter管道，但我们可以用原生数组的filter方法结合字符串操作实现，或者自定义管道复用逻辑。

方式一：直接修改组件中的filter代码 #

你现在的精确匹配代码是：

this.myArray = this.myArray2.filter(myClass => myClass.name == value);

改成包含匹配很简单，推荐加上大小写转换避免大小写敏感，有几种常用方式：

// 方法1：使用includes()，代码最简洁
this.myArray = this.myArray2.filter(myClass => 
  myClass.name.toLowerCase().includes(value.toLowerCase())
);

// 方法2：使用indexOf()，兼容性更广（不过现代浏览器都支持includes了）
this.myArray = this.myArray2.filter(myClass => 
  myClass.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
);

// 方法3：使用正则表达式，灵活性更高（比如支持模糊匹配的特殊规则）
const regex = new RegExp(value, 'i'); // 'i'表示忽略大小写
this.myArray = this.myArray2.filter(myClass => regex.test(myClass.name));

这样当value是'mar'时，所有name包含mar的项（比如Mark、Romar、Smarts）都会被筛选出来。

方式二：自定义管道（推荐，适合模板中复用） #

如果需要在多个模板中使用这种过滤逻辑，自定义一个管道会更优雅：

1. 用CLI生成管道文件：ng generate pipe likeFilter
2. 实现管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'likeFilter'
})
export class LikeFilterPipe implements PipeTransform {
  transform(items: any[], searchTerm: string, propertyName?: string): any[] {
    // 没有数据或搜索词时直接返回原数组
    if (!items || !searchTerm) {
      return items;
    }

    searchTerm = searchTerm.toLowerCase();

    // 如果指定了字段，只过滤该字段；否则检查所有属性
    return items.filter(item => {
      if (propertyName) {
        return item[propertyName].toLowerCase().includes(searchTerm);
      } else {
        return Object.values(item).some(val => 
          val.toString().toLowerCase().includes(searchTerm)
        );
      }
    });
  }
}

3. 在模板中使用：

<input type="text" [(ngModel)]="searchValue" placeholder="输入关键词">

<ul>
  <li *ngFor="let item of myArray2 | likeFilter:searchValue:'name'">
    {{item.name}}
  </li>
</ul>

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