AngularJS基础知识笔记之过滤器-JavaScript中文网-JavaScript教程资源分享门户

在AngularJS中，过滤器是一种用于格式化或转换数据的特殊函数。它们通常被用于模板中的表达式、指令或控制器等地方，可以对数据进行排序、搜索、格式化和分页等操作。

基本语法

过滤器由管道符号（|）连接到表达式后面，语法如下：

{{ expression | filter }}

其中 expression 是要处理的数据，filter 是要应用的过滤器名称。过滤器可以链式调用，将多个过滤器按顺序组合使用。

{{ expression | filter1 | filter2 | ... }}

内置过滤器

AngularJS提供了一些内置过滤器，可以直接在模板中使用。下面是一些常用的内置过滤器及其用法示例：

uppercase: 将字符串转换为大写字母。

{{ 'hello world' | uppercase }} <!-- 输出：HELLO WORLD -->

lowercase: 将字符串转换为小写字母。

{{ 'HELLO WORLD' | lowercase }} <!-- 输出：hello world -->

currency: 将数值格式化为货币形式，默认使用美元符号。
```
{{ 123.45 | currency }} 
```

date: 将日期格式化为指定格式的字符串。

{{ '2023-04-07T10:30:00.000Z' | date:'yyyy-MM-dd HH:mm:ss' }} <!-- 输出：2023-04-07 10:30:00 -->

filter: 过滤数组或对象中符合条件的元素。
```
<ul>
  <li ng-repeat="item in items | filter:{price: '<100'}">{{ item.name }} - {{ item.price }}</li>
</ul>
```
上面的例子将显示所有价格小于100的商品名称和价格。

orderBy: 对数组进行排序。

<ul>
  <li ng-repeat="item in items | orderBy:'price'">{{ item.name }} - {{ item.price }}</li>
</ul>

上面的例子将按照价格升序排列商品列表。

自定义过滤器

除了内置过滤器，我们还可以自定义过滤器以满足特定需求。自定义过滤器需要使用 filter 方法来注册，在模板中与内置过滤器一样使用即可。下面是一个示例：

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

上面的代码定义了一个名为 reverse 的自定义过滤器，它会将输入的字符串反转后返回。在模板中使用该过滤器如下：

{{ 'hello world' | reverse }} <!-- 输出：dlrow olleh -->

总结

过滤器是AngularJS中非常重要的一个特性，它可以方便地处理数据的格式化和转换。通过本文的介绍，你应该已经掌握了基本的语法和常见的内置过滤器的用法，同时也学会了如何自定义过滤器来满足自己的需求。在实际开发中，合理使用过滤器可以大幅提高代码的可读性和可维护性，希望本文能为你在前端开发中的学习和实践提供一些指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/2927