AngularJS 作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了便捷的格式化方式，本文将通过基础概念、常用过滤器示例及自定义过滤器编写，带你快速掌握 AngularJS 过滤器的核心用法。
过滤器基础概念
过滤器在 AngularJS 中主要用于对数据进行格式化处理，通常在模板中通过管道符（）调用，其基本语法为
{{ expression | filterName : parameter1 : parameter2 ... }}
，
expression
为需要处理的数据，
filterName
为过滤器名称，为可选参数，过滤器可串联使用，也可应用于指令（如）中的数据。
常用过滤器示例
格式化过滤器
数组/对象过滤器
字符串处理过滤器
自定义过滤器
当内置过滤器无法满足需求时,可自定义过滤器，通过模块的方法注册，语法如下：
angular.module('myApp', []).filter('reverse', function() {return function(input) {return input.split('').reverse().join('');};});
模板中使用方式：
{{ "hello" | reverse }}
输出：
自定义过滤器支持依赖注入,
.filter('greet', function() {return function(name) {return "Hello, " + name + "!";};});
使用：
{{ "World" | greet }}
输出：
Hello, World!
过滤器在指令中的综合应用
以下是一个结合和多个过滤器的示例，展示用户列表的筛选、排序和格式化：
CONtroller="Userctrl">
- {{ user.name | uppercase }} - {{ user.age | number }}岁 - 加入时间：{{ user.joinDate | date : "yyyy年MM月dd日" }}
对应控制器：
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")}];});
注意事项
通过本文的示例,相信你已经掌握了 AngularJS 过滤器的核心用法，合理运用过滤器，能显著提升数据展示的灵活性和代码的可读性，为前端开发带来便利。
发表评论