AngularJS 过滤器

在 AngularJS 中，过滤器（Filters） 是用于格式化数据的工具。过滤器可以在模板中应用，以便以特定的方式展示数据，而无需更改原始数据本身。常见的用途包括格式化日期、货币、文本、数组等。

AngularJS 提供了多个内置过滤器，也允许你创建自定义过滤器来满足特定需求。

内置过滤器

currency：格式化数字为货币格式。
date：格式化日期对象。
filter：过滤数组中的元素。
json：将数据转换为 JSON 字符串。
limitTo：限制数组或字符串的长度。
lowercase：将文本转换为小写字母。
uppercase：将文本转换为大写字母。
number：格式化数字。
orderBy：对数组进行排序。

过滤器的使用

1. `currency` 过滤器

currency 过滤器将数字转换为货币格式。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>currency 过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ amount | currency }}</p>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.amount = 1234.56;
        });
    </script>
</body>
</html>

在这个例子中，currency 过滤器将 1234.56 转换为 ¥1,234.56（假设区域为中国）。你也可以传递参数来指定货币符号或小数位数。

2. `date` 过滤器

date 过滤器将日期格式化为指定格式。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>date 过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ currentDate | date:'yyyy-MM-dd' }}</p>
    <p>{{ currentDate | date:'fullDate' }}</p>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.currentDate = new Date();
        });
    </script>
</body>
</html>

在这个例子中，date 过滤器将当前日期格式化为 yyyy-MM-dd 或完整的日期格式（fullDate）。

3. `filter` 过滤器

filter 过滤器用来对数组进行过滤，返回符合条件的项。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>filter 过滤器示例</title>
</head>
<body ng-controller="myController">
    <ul>
        <li ng-repeat="item in items | filter: 'a'">{{ item }}</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.items = ['apple', 'banana', 'cherry', 'apricot'];
        });
    </script>
</body>
</html>

在这个例子中，filter 过滤器过滤出包含字母 “a” 的项，结果将只显示 apple 和 apricot。

4. `json` 过滤器

json 过滤器将对象或数组转换为 JSON 字符串格式，通常用于调试。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>json 过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ data | json }}</p>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.data = { name: 'Alice', age: 25, city: 'New York' };
        });
    </script>
</body>
</html>

在这个例子中，json 过滤器将对象转换为字符串并显示为 JSON 格式：{"name":"Alice","age":25,"city":"New York"}。

5. `limitTo` 过滤器

limitTo 过滤器限制数组或字符串的长度。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>limitTo 过滤器示例</title>
</head>
<body ng-controller="myController">
    <ul>
        <li ng-repeat="item in items | limitTo:3">{{ item }}</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.items = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
        });
    </script>
</body>
</html>

在这个例子中，limitTo:3 限制了显示的列表项数量，仅显示前三个：apple, banana, cherry。

6. `lowercase` 过滤器

lowercase 过滤器将文本转换为小写字母。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>lowercase 过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ 'HELLO WORLD' | lowercase }}</p>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {});
    </script>
</body>
</html>

在这个例子中，lowercase 过滤器将字符串 'HELLO WORLD' 转换为小写字母：hello world。

7. `uppercase` 过滤器

uppercase 过滤器将文本转换为大写字母。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>uppercase 过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ 'hello world' | uppercase }}</p>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {});
    </script>
</body>
</html>

在这个例子中，uppercase 过滤器将字符串 'hello world' 转换为大写字母：HELLO WORLD。

8. `orderBy` 过滤器

orderBy 过滤器用于对数组进行排序。

示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>orderBy 过滤器示例</title>
</head>
<body ng-controller="myController">
    <ul>
        <li ng-repeat="item in items | orderBy">{{ item }}</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.items = [5, 3, 8, 2, 7];
        });
    </script>
</body>
</html>

在这个例子中，orderBy 过滤器对数组进行升序排序：2, 3, 5, 7, 8。

自定义过滤器

你也可以创建自己的过滤器，通过 angular.module().filter() 方法来定义。

示例：自定义过滤器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>自定义过滤器示例</title>
</head>
<body ng-controller="myController">
    <p>{{ 'hello world' | reverse }}</p>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.filter('reverse', function() {
            return function(input) {
                return input.split('').reverse().join('');
            };
        });

        app.controller('myController', function($scope) {});
    </script>
</body>
</html>

在这个例子中，自定义了一个 reverse 过滤器，将字符串反转，结果是：dlrow olleh。

总结

过滤器 是 AngularJS 中的强大工具，用于在视图中格式化数据。
AngularJS 提供了许多 内置过滤器，如 currency、date、filter、json、limitTo、lowercase、uppercase、orderBy 等。
你也可以 自定义过滤器 来满足应用特定需求。
过滤器通常用于模板中，它们通过管道符（|）连接到表达式中，格式化并显示数据。

AngularJS 过滤器