Angular.JS过滤器与自定义过滤器实战解析

“Angular.Js中过滤器filter与自定义过滤器filter实例详解” 在AngularJS框架中，过滤器（filter）是一种强大的工具，用于在视图层对数据进行转换和格式化，使得数据显示更加易读和符合用户需求。本文将深入讲解AngularJS内置的过滤器以及如何创建自定义过滤器。 一、AngularJS内置过滤器 1. `uppercase` 和 `lowercase`：这两个过滤器分别用于将字符串转换为大写和小写。例如，在`uppercaseController`和`lowercaseController`中，`person.lastName`通过这两个过滤器处理后，显示为相应的大写或小写形式。 2. `json`：将JavaScript对象转换为JSON格式的字符串，便于查看和调试。例如，可以使用`{{ someObject | json }}`来展示对象的结构。 3. `date`：用于格式化日期。可以根据需要定制日期的显示格式，如`{{ someDate | date:'MM/dd/yyyy' }}`。 4. `number`：用于格式化数字，可以设置小数位数。例如，`{{ someNumber | number:2 }}`会保留两位小数。 5. `currency`：将数字格式化为货币样式，支持自定义货币符号。在`costController`中，`{{ (quantity * price) | currency }}`会显示为当前货币格式的总价，而`{{ 250 | currency:"RMB￥" }}`则指定为人民币。 6. `filter`：用于搜索数组中的特定项。例如，`{{ array | filter:someValue }}`会返回包含`somValue`的数组元素。 7. `limitTo`：截取字符串或数组的前几个元素。例如，`{{ longString | limitTo:5 }}`仅显示字符串的前5个字符。 8. `orderBy`：根据指定属性对数组进行排序。在`namesController`中，`ng-repeat`指令结合`orderBy`过滤器按国家名的字母顺序展示对象列表。 二、自定义过滤器 除了内置过滤器，AngularJS还允许开发者创建自己的过滤器。自定义过滤器可以扩展框架的功能，满足特定的数据处理需求。创建自定义过滤器一般有以下两种方式： 1. 函数过滤器：在模块的`.filter()`方法中定义一个函数，该函数接收原始数据并返回处理后的数据。例如： ```javascript angular.module('myApp').filter('customFilter', function() { return function(input) { // 在这里处理输入数据 var output = input.toUpperCase(); return output; }; }); ``` 2. 构造函数过滤器：使用类（constructor function）来创建过滤器，提供更复杂的功能。这个类必须有一个`$filterProvider`注入，并在其`$get`方法中定义过滤逻辑。 ```javascript angular.module('myApp').filter('customFilter', ['$filterProvider', function($filterProvider) { var myFilter = $filterProvider.$get(function() { // 实现过滤逻辑 return function(input) { // 处理输入数据 var output = input.reverse(); return output; }; }); return myFilter; }]); ``` 自定义过滤器可以在模板中像使用内置过滤器一样使用，例如`{{ someData | customFilter }}`。 总结来说，AngularJS的过滤器是实现数据呈现多样化和个性化的关键组件。它们简化了数据的格式化和处理，同时自定义过滤器提供了无限的扩展可能，使得开发者能够更好地控制应用中的数据展示。