详解AngularJS Filter（过滤器）用法

什么是AngularJS Filter?

AngularJS Filter(过滤器) 是AngularJS中的一种自定义组件，它可以对要展示在AngularJS应用程序模板上的数据进行数量、格式和类型等方面的过滤或转换，相当于是数据的预处理器。使用过滤器，可以让我们更加方便，快捷地展示数据。

例如，用户搜索商品时，我们需要将商品名称按照字母顺序进行排序，或者将价格进行格式化。这时候，就可以用到AngularJS Filter来处理数据。

AngularJS Filter的使用方法

AngularJS Filter的使用方法非常灵活，它可以在数据绑定到AngularJS模板时通过管道符|接到过滤器进行过滤，也可以在JavaScript代码中使用过滤器对数据进行处理。

在模板中使用AngularJS Filter

使用AngularJS Filter最常见的方式就是在页面模板中使用。如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS Filter示例</title>
    <script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="product in products | orderBy:'name'">
            {{product.name}} - {{product.price | currency}}
        </li>
    </ul>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.products = [
                {
                    name: 'Apple',
                    price: 2.0
                },
                {
                    name: 'Banana',
                    price: 1.5
                },
                {
                    name: 'Orange',
                    price: 3.0
                }
            ];
        });
    </script>
</body>

</html>

在上面的例子中，通过管道符 | 将 products 数组旁边的 orderBy 过滤器关联到 ng-repeat 语句中，然后通过 orderBy 过滤器将 products 提供的产品按名称字母顺序排列。同时， currency 过滤器也会将每个商品的价格格式化成货币格式。

在 JavaScript 中使用 Filter

在JavaScript中使用AngularJS Filter，可以通过$filter后置对象来引用过滤器。如以下示例所示：

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope, $filter) {

    var price = $filter('currency')(1234.5, '￥', 2);
    console.log(price); // ￥1,234.50

});

在上面的示例中，我们从 DI 中注入了 $filter 服务，然后使用 $filter 服务来访问currency过滤器，将数字转换为带单位的货币字符串。

AngularJS Filter 的常用过滤器示例

AngularJS Filter提供了十多种不同的过滤器，下面列出了最常见的几种过滤器的示例。

currency

currency 这个过滤器用于将数字格式化为货币格式。如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS currency过滤器示例</title>
    <script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    {{ price | currency:'￥':2 }}
    <!-- ￥1,234.50 -->
    {{ price | currency:'$':2 }}
    <!-- $1,234.50 -->

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.price = 1234.5;
        });
    </script>
</body>

</html>

uppercase / lowercase

uppercase / lowercase 这两个过滤器分别用于将字符串全部转为大写或小写。如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS uppercase/lowercase过滤器示例</title>
    <script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <p>{{ message | uppercase }}</p>
    <!-- HELLO WORLD! -->
    <p>{{ message | lowercase}}</p>
    <!-- hello world! -->

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.message = 'Hello World!';
        });
    </script>
</body>

</html>

filter

filter 过滤器用于从数组中选择一组元素并返回符合条件的新数组，它与JavaScript中的 Array对象的 filter 方法非常类似。如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS filter过滤器示例</title>
    <script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="product in products | filter:'a'">
            {{product.name}} - {{product.price | currency}}
        </li>
    </ul>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.products = [
                {
                    name: 'Apple',
                    price: 2.0
                },
                {
                    name: 'Banana',
                    price: 1.5
                },
                {
                    name: 'Orange',
                    price: 3.0
                }
            ];
        });
    </script>
</body>

</html>

在上面的例子中，filter 过滤器会将名称中包含字符 'a' 的产品筛选出来。