AngularJS-过滤器

在AngularJS中，过滤器(filter)是用于控制数据显示格式的方式之一。它可以将数据格式化为所需的格式，例如转化为货币、日期、百分比等等。

语法

使用过滤器的语法如下：

{{expression | filter:options}}

其中，expression是要被过滤的值，filter是过滤器的名称，options是一个可选的参数，用于指定过滤器的一些特定选项。

例如，下面的代码使用了内置的货币过滤器(currency)来将数据显示为货币格式：

<p>{{myMoney | currency:'USD'}}</p>

内置过滤器

AngularJS提供了一些内置的过滤器，包括：

currency

将数值格式化为货币格式。

<p>{{myMoney | currency:'USD'}}</p>

date

将日期格式化为特定的格式。

<p>{{myDate | date:'yyyy-MM-dd'}}</p>

filter

使用过滤器过滤数组或对象中的项。

<div ng-repeat="item in items | filter:search">{{item.name}}</div>

lowercase

将字符串转换为小写形式。

<p>{{myString | lowercase}}</p>

uppercase

将字符串转换为大写形式。

<p>{{myString | uppercase}}</p>

limitTo

限制展示的字符串长度。

<p>{{myString | limitTo:10}}</p>

number

将数值格式化为数字格式。

<p>{{myNumber | number}}</p>

orderBy

将数组按指定属性进行排序。

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

自定义过滤器

如果AngularJS提供的内置过滤器无法满足需求，我们可以自定义过滤器来实现特定的格式化需求。

自定义过滤器需要定义在应用程序模块下，如下所示：

angular.module('myApp', [])
  .filter('myFilter', function() {
    return function(input, arg1, arg2) {
      // 这里是过滤器处理逻辑
      return output;
    };
  });

上述代码中，myApp是应用程序模块的名称，myFilter是自定义过滤器的名称。在过滤器函数中，第一个参数input表示要被过滤的值，后面的参数表示可选的过滤器选项。函数需要返回处理后的结果output，这个值将会被展示在视图中。

下面是一个自定义邮箱掩码过滤器的例子，将邮箱地址的用户名部分保留前两个字符，用星号替代后面的字符：

angular.module('myApp', [])
  .filter('emailMask', function() {
    return function(input) {
      var parts = input.split('@');
      var username = parts[0].substr(0, 2) + '***';
      return username + '@' + parts[1];
    };
  });

在视图中可以这样使用：

<p>{{myEmail | emailMask}}</p>

总结

过滤器提供了一种方便的方式来格式化数据展示。除了内置过滤器，我们还可以自定义过滤器来满足特定的需求。在使用过滤器时，可以通过不同的选项来控制数据的显示格式。