AngularJS过滤器怎么用？入门教程示例详解

AngularJS 作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了便捷的格式化方式，本文将通过基础概念、常用过滤器示例及自定义过滤器编写，带你快速掌握 AngularJS 过滤器的核心用法。

过滤器基础概念

过滤器在 AngularJS 中主要用于对数据进行格式化处理，通常在模板中通过管道符（）调用，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}，expression 为需要处理的数据，filterName 为过滤器名称，parameter 为可选参数，过滤器可串联使用，也可应用于指令（如 ng-repeat）中的数据。

常用过滤器示例

格式化过滤器

• currency：将数字转换为货币格式。
  示例：{{ 1234.56 | currency : "¥" : 0 }}
  输出：¥1235（参数1为货币符号，参数2为小数位数）

• date：格式化日期对象。
  示例：{{ dateValue | date : "yyyy-MM-dd HH:mm:ss" }}
  输出：2023-10-01 15:30:00（参数为日期格式模板）

• number：格式化数字。
  示例：{{ 0.12345 | number : 2 }}
  输出：12（参数为小数位数）

数组/对象过滤器

• filter：根据条件筛选数组。
  示例：<li ng-repeat="user in users | filter : {age : '>20'}">{{ user.name }}</li>
  作用：筛选 age 大于 20 的用户。

• orderBy：对数组进行排序。
  示例：<li ng-repeat="user in users | orderBy : '-age'">{{ user.name }}</li>
  作用：按 age 降序排列（ 表示降序）。

  

• limitTo：截取数组或字符串。
  示例：{{ "Hello Angular" | limitTo : 5 }}
  输出：Hello

字符串处理过滤器

• uppercase/lowercase：转换大小写。
  示例：{{ "angular" | uppercase }}
  输出：ANGULAR

• json：将对象转换为 JSON 字符串（便于调试）。
  示例：{{ {name: "Tom", age: 20} | json }}
  输出：{"name":"Tom","age":20}

自定义过滤器

当内置过滤器无法满足需求时,可自定义过滤器，通过模块的 filter 方法注册，语法如下：

angular.module('myApp', [])
  .filter('reverse', function() {
    return function(input) {
      return input.split('').reverse().join('');
    };
  });

模板中使用方式：{{ "hello" | reverse }}
输出：olleh

自定义过滤器支持依赖注入,

.filter('greet', function() {
  return function(name) {
    return "Hello, " + name + "!";
  };
});

使用：{{ "World" | greet }}
输出：Hello, World!

过滤器在指令中的综合应用

以下是一个结合 ng-repeat 和多个过滤器的示例，展示用户列表的筛选、排序和格式化：

<div ng-app="userApp" ng-controller="UserCtrl">
  <input type="text" ng-model="searchText" placeholder="搜索用户名">
  <select ng-model="sortOrder">
    <option value="name">按姓名排序</option>
    <option value="-age">按年龄降序</option>
  </select>
  <ul>
    <li ng-repeat="user in users | filter : searchText | orderBy : sortOrder">
      {{ user.name | uppercase }} - {{ user.age | number }}岁 - 加入时间：{{ user.joinDate | date : "yyyy年MM月dd日" }}
    </li>
  </ul>
</div>

对应控制器：

angular.module('userApp', [])
  .controller('UserCtrl', function($scope) {
    $scope.users = [
      {name: "Alice", age: 25, joinDate: new Date("2022-01-15")},
      {name: "Bob", age: 30, joinDate: new Date("2021-05-20")},
      {name: "Carol", age: 28, joinDate: new Date("2022-03-10")}
    ];
  });

注意事项

1. 性能优化：避免在大量数据（如 ng-repeat）中使用复杂过滤器，可能导致性能问题。
2. 不可变性：过滤器返回新对象，不会修改原始数据。
3. 版本差异：AngularJS 1.x 与 Angular（2+）的过滤器语法完全不同，需注意区分。

通过本文的示例,相信你已经掌握了 AngularJS 过滤器的核心用法，合理运用过滤器，能显著提升数据展示的灵活性和代码的可读性，为前端开发带来便利。