Angular中有哪些不同类型的过滤器

封面图 • 2025-11-21 • Angular

在 Angular 中，**过滤器（Filters）** 通常用于对数据进行格式化或筛选。不过需要注意的是，Angular **从版本 2 开始已经移除了内置的 `filter` 管道（即 `| filter`），并且不再推荐使用**。这是因为在 Angular 中，更推荐使用 **管道（Pipes）** 或者 **组件逻辑** 来处理数据。

但如果你是在使用 **AngularJS（Angular 1.x）**，那么它确实有内置的 `filter` 过滤器。下面我将分别介绍：

---

## 🔹 一、AngularJS（Angular 1.x）中的过滤器

在 AngularJS 中，`filter` 是一个内置的过滤器，用于对数组进行筛选。

### 示例：
```html
<div ng-repeat="item in items | filter:searchText">
  {{ item.name }}
</div>
```

### 类型和用法：

#### 1. **基本过滤器（字符串匹配）**
```js
$scope.searchText = 'apple';
```
这会筛选出所有包含 "apple" 的项。

#### 2. **对象属性过滤**
```js
$scope.searchText = { name: 'apple' };
```
这会筛选出 `name` 属性为 "apple" 的对象。

#### 3. **自定义过滤器函数**
你可以传递一个函数作为过滤器：
```js
$filter('filter')(items, function(item) {
  return item.price > 10;
});
```

#### 4. **多条件过滤**
可以使用对象来指定多个字段：
```js
$scope.searchText = { name: 'apple', category: 'fruit' };
```

---

## 🔹 二、Angular（2+）中的“过滤器”替代方案

在 Angular 2+ 中，官方不推荐使用类似 AngularJS 的 `filter` 过滤器，而是建议使用以下方式：

### 1. **Pipe（管道）**

你可以创建自定义的管道来实现类似过滤功能。

#### 示例：自定义过滤管道
```ts
@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(items: any[], term: string): any[] {
    if (!term || !items) return items;
    return items.filter(item =>
      item.name.toLowerCase().includes(term.toLowerCase())
    );
  }
}
```

#### 使用方式：
```html
<div *ngFor="let item of items | filter:searchTerm">
  {{ item.name }}
</div>
```

### 2. **在组件中直接处理过滤逻辑**

你也可以在组件中使用 `filter()` 方法来处理数据。

#### 示例：
```ts
filteredItems = this.items.filter(item =>
  item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
);
```

### 3. **使用 RxJS 的 `filter` 操作符**

如果你使用了 Observable 数据流，可以使用 `rxjs` 的 `filter` 操作符。

```ts
from(this.items).pipe(
  filter(item => item.name.includes(this.searchTerm))
).subscribe(...);
```

---

## 🔹 三、总结对比

| 功能/特性         | AngularJS（Angular 1.x）        | Angular 2+                         |
|------------------|-------------------------------|------------------------------------|
| 内置过滤器       | ✅ `| filter`                  | ❌ 不支持，需自定义                |
| 自定义过滤器     | ✅ 可以通过服务或指令实现      | ✅ 可以通过 Pipe 实现              |
| 多条件过滤       | ✅ 支持对象参数               | ✅ 通过 Pipe 实现                  |
| 推荐方式         | ❌ 不推荐，逐渐淘汰            | ✅ 推荐使用 Pipe 或组件逻辑        |

---

## 📌 建议

- 如果你在使用 **Angular 2+**，请避免使用类似 AngularJS 的 `filter`。
- 使用 **Pipe** 或 **组件逻辑** 来实现数据过滤。
- 如果你需要复杂的数据处理，可以考虑结合 **RxJS** 或 **NgRx** 状态管理库。

如需示例代码或具体实现，我可以继续为你提供帮助！