AngularJS | 过滤器

在AngularJS中，过滤器是一种在视图中对数据进行格式化的工具。它可以将数据按指定的格式显示出来，或者将数据进行排序、去重等处理，从而轻松地控制视图的输出。

使用方式

在AngularJS中，使用过滤器非常简单。只需要在模板中使用管道符号“|”来连接过滤器名和过滤器参数即可。

<!-- 使用 "uppercase" 过滤器将数据转换为大写字母 -->
<p>{{ myText | uppercase }}</p>

<!-- 使用 "currency" 过滤器将数据格式化为货币 -->
<p>{{ myPrice | currency:'￥' }}</p>

<!-- 使用 "orderBy" 过滤器对数据进行排序 -->
<li ng-repeat="item in items | orderBy:'-date'">{{ item.title }}</li>

自定义过滤器

除了AngularJS自带的过滤器之外，我们也可以定义自己的过滤器，它可以用来扩展AngularJS的功能，以满足我们的需求。

// 自定义过滤器名称必须与定义一致
app.filter('reverse', function() {
    return function(input) {
        var reversed = '';
        for (var i = input.length - 1; i >= 0; i--) {
            reversed += input.charAt(i);
        }
        return reversed;
    };
});

在模板中使用自定义的过滤器也非常简单：

<p>{{ myText | reverse }}</p>

常用过滤器

AngularJS内置了很多有用的过滤器，这里简单介绍一些常用的过滤器：

• currency：将数值格式化为货币格式
• date：将日期格式化为指定的格式
• json：将对象序列化为JSON格式
• limitTo：从数组或字符串中选择指定数量的元素或字符
• lowercase：将字符串转换为小写字母
• uppercase：将字符串转换为大写字母
• filter：从数组中选择符合条件的元素

总结

过滤器是AngularJS的一个重要特性，它可以轻松地控制视图输出的格式，并且还可以方便地扩展AngularJS的功能。掌握过滤器的使用方式和常用方法，可以让我们更好地编写可维护、易读的AngularJS应用程序。