zoukankan html css js c++ java

AngularJS 1.x系列：AngularJS过滤器（4）

1. AngularJS过滤器（Filter）使用方法

　　AngularJS中过滤器（Filter）主要功能是格式化数据。

　　AngularJS过滤器使用方法有3种：

　　◊ 在表达式{{}}中使用

　　◊ 在指令中使用

　　◊ 在Controller或Service、Factory、Provider等服务中使用

1.1 表达式中使用过滤器

　　过滤器使用管道符（|）添加到表达式或指令中。

　　语法：

{{ expression | filter }}

　　可以同时使用多个过滤器，多个过滤器之间管道符（|）分隔。

{{ expression | filter1 | filter2 | ... | filterN }}

　　过滤器可以带参数，参数使用冒号（:）隔开。

{{ expression | filter1:param1 | filter2:param2 | ... | filterN:paramN }}

1.2 指令中使用过滤器

　　过滤器使用管道符（|）添加到表达式或指令中。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 600 },
                    { ProductName: "数码", Quantity: 200 },
                    { ProductName: "手机", Quantity: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <ul ng-controller="ProductCtrl">
            <li ng-repeat="item in data | orderBy: 'Quantity'">
                <span>{{ item.ProductName }}</span>
                <span>{{ item.Quantity }}</span>
            </li>
        </ul>
    </body>
</html>

　　降序：

<li ng-repeat="item in data | orderBy: 'Quantity' : true">

1.3 在Controller或AngularJS服务中使用过滤器

　　在Controller、Service、Factory、Provider等服务中使用过滤器方式：依赖注入。

　　示例：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("MainCtrl", ["$scope", "currencyFilter", function($scope, currencyFilter) {
                $scope.unitprice = currencyFilter(10000);
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="MainCtrl">
            {{ unitprice }}
        </div>
    </body>
</html>

　　currencyFilter为AngularJS内置过滤器，用于将数字转化为货币形式。

　　AngularJS提供$filter服务，可以调用所有过滤器。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("MainCtrl", ["$scope", "$filter", function($scope, $filter) {
                $scope.unitprice = $filter("currency")(10000);
                $scope.now = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="MainCtrl">
            {{ unitprice }}  // $10,000.00
            {{ now }}        // 2017-06-05 23:08:02
        </div>
    </body>
</html>

$scope.unitprice = $filter("currency")(10000, "￥");  // ￥10,000.00

　　$filter("name")根据名称获取对应的过滤器，把数据作为参数传递给过滤器处理。

2. AngularJS内置过滤器

2.1 filter

　　filter过滤器用来处理数组，过滤包含某个子串的元素，过滤后的元素作为子数组返回。可以是字符串数组或对象数组。

　　对象数组，则匹配属性的值。可以接收一个参数，用来定义子元素的匹配规则。

　　示例：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <input type="text" class="form-control" ng-model="keyword" placeholder="请输入查询关键字" />
            </div>
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | filter: keyword">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <div class="container">
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | filter: {'ProductName': '数'}">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice | currency }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

2.2 currency

　　currency货币格式化，默认为$，可以参数设置其他符号及精度。

　　示例：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <input type="text" class="form-control" ng-model="keyword" placeholder="请输入查询关键字" />
            </div>
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | filter: keyword">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice | currency }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

　　设置其他符号：

{{ 1000 | currency: "￥" }}   // ￥1,000.00

　　设置精度：

{{ 1000.75 | currency: "￥": 1 }}  // ￥1,000.8

2.3 number

　　number过滤器用于将数字格式化为文本，可以对数字设置精度。默认保留的小数位数小于或等于3。

{{ 10000 | number }}  // 10,000

{{ 3.1415926 | number }}   // 3.142

{{ 3.1415926 | number: 2 }}  // 3.14

2.4 lowercase & uppercase

　　lowercase过滤器：将字符串中的大写字母全部转换为小写。

{{ "Hello AngularJS" | lowercase }}  // hello angularjs

　　uppercase过滤器：将字符串中的小写字母全部转换为大写。

{{ "Hello AngularJS" | uppercase }}  // HELLO ANGULARJS

2.5 date

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("DateCtrl", ["$scope", function($scope){
                $scope.now = new Date();
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="DateCtrl">
           <span>{{ now | date }}</span>
           <span>{{ now | date: "yyyy-MM-dd" }}</span>
           <span>{{ now | date: "yyyy-MM-dd HH:mm:ss" }}</span>
           <span>{{ now | date: "yyyy年MM月dd日" }}</span>
        </div>
    </body>
</html>

2.5 limitTo

　　limitTo过滤器：用来截取数组或字符串，参数用来指定截图长度。如果参数是负值，则从尾部开始截取。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 1000, UnitPrice: 100 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <div class="container">
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | limitTo: 2">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice | currency }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

{{ "Hello" | limitTo: 2 }}  // He

2.6 orderBy

　　orderBy过滤器：用来将一个数组中的元素进行排序，可以设置参数指定排序规则。

　　参数：字符串，表示按照该属性名进行排序。

　　参数：数组，表示依次按照数组中的属性进行排序。

　　示例：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
        </script>
    </head>
    <body>
        <div class="container">
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | orderBy: 'Quantity' | limitTo: 2">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice | currency }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

　　orderBy过滤器默认为升序。

　　设置降序两种方式：

<tr ng-repeat="item in data | orderBy: 'Quantity': true | limitTo: 2">

<tr ng-repeat="item in data | orderBy: '-Quantity' | limitTo: 2">  // 排序属性前加减号（-）

3. 自定义过滤器

　　AngularJS自定义过滤器，调用模块实例的filter()方法。

3.1 自定义不带参数过滤器

　　filter()使用方法：

var app = angular.module("app", []);
app.filter("filterName", function() {
    return function(input) {
        // 逻辑处理
        ...
        return result;
    };
});

　　filter()方法两个参数：

　　　　第一个参数：过滤器名称，

　　　　第二个参数:过滤器定义方法，必须返回一个用于处理过滤器逻辑的方法。返回的方法可接受一个参数：过滤器的输出数据。

　　示例:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("MainCtrl", ["$scope", function ($scope) {
            $scope.amount = 1234.53;
        }]);
        app.filter("toRMB", function () {
            return function (input) {
                var fraction = ["角", "分"];
                var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
                var unit = [["元", "万", "亿"], ["", "拾", "佰", "仟"]];

                var result = "整";
                for (var i = 0; i < fraction.length; i++) {
                    var t = Math.floor(input * 10 * Math.pow(10, 1)) % 10;
                    result += (digit[Math.floor(input * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, "");
                }

                result = result || "整";

                input = Math.floor(input);
                for (var i = 0; i < unit[0].length && input > 0; i++) {
                    var n = "";
                    for (var j = 0; j < unit[1].length && input > 0; j++) {
                        n = digit[input % 10] + unit[1][j] + n;
                        input = Math.floor(input / 10);
                    }

                    result = n.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + result;
                }

                result = result.replace(/(零.)*零元/, "元").replace(/(零.)+/g, "零").replace(/^整$/, "零元整");

                return result;
            };
        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        {{ amount | toRMB }}
    </div>
</body>
</html>

　　注：toRMB数字转大写方法存在Bug，不能完全正确转换。

　　使用$filter调用自定义过滤器：

app.controller("MainCtrl", ["$scope", "$filter", function ($scope, $filter) {
    $scope.amount = $filter("toRMB") (1234.53);
}]);

3.2 自定义带参数的过滤器

　　语法：

app.filter("filterName", function() {
    return function(input, param1, param2, ... ,paramN) {
        // 逻辑处理
        ...
        return result;
    };
});

　　其中：param1，param2，...，paramN为过滤器使用时传入的参数。

　　示例：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ProductCtrl", ["$scope", function($scope){
                $scope.data = [
                    { ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
                    { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                    { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
                ];
            }]);
            app.filter("greaterThan", function() {
                return function(input, unitPrice) {
                    var result = [];
                    if(typeof(unitPrice) != "undefined" && unitPrice != "") {
                        angular.forEach(input, function(item) {
                            if(item.UnitPrice > unitPrice) {
                                result.push(item);
                            }
                        });

                        return result;
                    }

                    return input;
                };
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row form-inline" style="padding: 5px 15px;">
                单价：<input type="text" class="form-control" ng-model="unitprice" style=" 200px;" />
            </div>
            <table class="table table-bordered table-hover" ng-controller="ProductCtrl" style=" 500px;">
                <thead>
                    <tr>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in data | greaterThan: unitprice">
                        <td>{{ item.ProductName }}</td>
                        <td class="text-center">{{ item.Quantity }}</td>
                        <td class="text-center">{{ item.UnitPrice | currency }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

4. 第三方过滤器插件

4.1 angular-filter

　　官网：https://github.com/a8m/angular-filter

　　npm安装：

npm install angular-filter

　　示例：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript" src="../lib/angular-filter.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", ["angular.filter"]);
        app.controller("ProductCtrl", ["$scope", function ($scope) {
            $scope.data = [
                { ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
                { ProductName: "数码", Quantity: 2000, UnitPrice: 200 },
                { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
            ];
        }]);
    </script>
</head>
<body>
    <div class="container">
        <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
            <thead>
                <tr>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">数量</th>
                    <th class="text-center">单价</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in data | first: 1">
                    <td>{{ item.ProductName }}</td>
                    <td class="text-center">{{ item.Quantity }}</td>
                    <td class="text-center">{{ item.UnitPrice | currency }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

　　其中，引入插件：

<script type="text/javascript" src="../lib/angular-filter.min.js"></script>

　　在自定义模块中添加angular.filter注入：

var app = angular.module("app", ["angular.filter"]);

　　angular-filter部分过滤器示例：

　　集合元素

　　unique：从数组或对象中删除重复项。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript" src="../lib/angular-filter.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", ["angular.filter"]);
        app.controller("ProductCtrl", ["$scope", function ($scope) {
            $scope.data = [
                { ProductName: "家电", Quantity: 5000, UnitPrice: 500 },
                { ProductName: "数码", Quantity: 2000, UnitPrice: 300 },
                { ProductName: "手机", Quantity: 3000, UnitPrice: 300 }
            ];
        }]);
    </script>
</head>
<body>
    <div class="container">
        <table class="table table-bordered table-hover" ng-controller="ProductCtrl">
            <thead>
                <tr>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">数量</th>
                    <th class="text-center">单价</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in data | unique: 'UnitPrice'">
                    <td>{{ item.ProductName }}</td>
                    <td class="text-center">{{ item.Quantity }}</td>
                    <td class="text-center">{{ item.UnitPrice | currency }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

查看全文

相关阅读:
弄懂JDK、JRE和JVM到底是什么
 精选Java面试题（二）
精选Java面试题
 HttpPost请求将json作为请求体传入的简单处理方法
 Python在for循环中更改list值的方法
 vue 图片加载失败时，加载默认图片
 移动端，进入页面前空白，添加加载状态
 img 失效时显示默认图片
 vue 全局组件的引用
 页面到达底部，加载更多

原文地址：https://www.cnblogs.com/libingql/p/6930539.html