AngularJS过滤器filter

ゝ一纸荒年。 2022-04-06 10:48 246阅读 0赞

在开发中，经常会遇到这样的场景：

如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女”再显示出来；

如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；

买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品；

![2353708f-8f10-348b-ad85-94a070a54d8d.png][]  
　　以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，AngularJS的filter就是用来做这个事的。

**一.内置过滤器**

AngularJS内置了很多过滤器，在HTML模板的绑定符号\{ \{\}\}内通过｜来调用过滤器，如字母转换成大写：$scope.name='wangmeijian'

{
        {name | uppercase}}   // 输出 WANGMEIJIAN

数字转成千分位写法：$scope.num = 12345678

{
        {num | number}} // 输出 12,345,678

日期格式化：$scope.date=new Date()

{
        {date | date:'yy-MM-dd'}}   // 输出 2015-11-19

数字格式化成货币：$scope.num=987654321

{
        {num | currency:'￥'}}   // 输出 ￥987,654,321.00

实例如下：

index.html

<html ng-app='app'>
    	<head>
    		<title>AngularJS过滤器filter入门</title>
    	</head>
    	<body ng-controller='myController'>
    		<p>{
        {name}}转换成大写：{
        {name | uppercase}}</p>
    		<p>12345678数字转成千分位写法：{
        {num | number}}</p>
    		<p>日期格式化：{
        {date | date:'yy-MM-dd'}}</p>
    		<p>{
        {987654321| currency:'￥'}}</p>
    	</body>
        <script type="text/javascript" src="angular1.2.9.js" ></script>
        <script type="text/javascript" src="filter.js" ></script>
    </html>

filter.js

var app = angular.module('app',[])
    	.controller('myController',['$scope', function($scope){
    		$scope.name = 'abcdefg';
    		$scope.num = 12345678;
    		$scope.date = new Date();
    	}])

运行效果：

![441c2101-a351-3559-8469-25646b01bbfa.png][]  
　　稍微复杂一点的过滤器——‘filter’，可以返回给定数组的子集，它接收一个参数，这个参数可以是字符串、对象、函数。

字符串：返回所有包含这个字符串的元素，想要返回不包含这个字符串的元素则在前面加！

demo：

{
        {['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']

对象：Angular会将待过滤对象的属性与这个对象中的同名属性进行比较，如果属性值是字符串会判断是否包含该字符串（注意这里是包含，并不需要完全相等）

demo：

{
       { [
        {
            name: 'wangmeijian',
            sex: 'boy'
        },
        {
            name: 'bokeyuan',
            sex: 'sex'
        }
       ] | filter:{
            sex: 'bo'
    　　　　}
    }}

// 输出 \[\{"name":"wangmeijian","sex":"boy"\}\]

函数：对每个元素都执行该函数，返回非假值的元素会出现在新的数组中并返回

demo：

$scope.getNumber = function(n){
    　　return !isNaN(n);
    }

{
        { ['demo',2,3] | filter:getNumber}}  // 输出 [2,3]

**二.自定义过滤器**

当内置函数不能满足你的业务需求时，就需要自定义一个过滤器，自定义过滤器返回一个函数，函数的参数就是HTML模板中|左侧的数据，它会自动传入过滤器中。

比如需求是将一句话中的每个单词首字母变成大写。

index02.html

<html ng-app='app'>
        <head>
            <title>AngularJS过滤器filter入门</title>
        </head>
        <body ng-controller='myController'>
            <p>{
        { str | capitalize}}</p>
            
        </body>
    	<script type="text/javascript" src="angular1.2.9.js" ></script>
        <script type="text/javascript" src="index02Filter.js" ></script>
    </html>

index02Filter.js

运行效果：

![0d7dfddd-8d45-383a-a85b-3c48136eff74.png][]

需要注意的是，内置过滤器‘filter’的参数是函数时，会对数组的每个元素执行该函数，自定义过滤器是对数组对象执行它return的函数。

**三.实际应用**

在实际应用中，会存在对金额进行取两位小数且做千位分隔符的处理，可以将其做成服务在控制器中调用，也可封装成一个过滤器。如下所示：

index03.html

<html ng-app='app'>
        <head>
            <title>AngularJS过滤器filter入门</title>
        </head>
        <body ng-controller='myController'>
    		<p ng-bind='formatNum'></p>
            <p>{
        { num | bitSeparatorFilter}}</p>
        </body>
    	<script type="text/javascript" src="angular1.2.9.js" ></script>
        <script type="text/javascript" src="index03Filter.js" ></script>
    </html>

index03Filter.js

运行效果：

![bc6c9288-e7bf-304b-8d47-5599c96fae76.png][]

参考文章：[http://www.cnblogs.com/wangmeijian/p/4979452.html][http_www.cnblogs.com_wangmeijian_p_4979452.html]

[2353708f-8f10-348b-ad85-94a070a54d8d.png]: /images/20220406/a27a9443745440819dad882dc1bfc96f.png
[441c2101-a351-3559-8469-25646b01bbfa.png]: /images/20220406/786a17519fc942df9f1d91faa0fb166c.png
[0d7dfddd-8d45-383a-a85b-3c48136eff74.png]: /images/20220406/48cf2e7199a34b36a3901c9cef001ace.png
[bc6c9288-e7bf-304b-8d47-5599c96fae76.png]: /images/20220406/aae4f4c99d93497499a629aa54ecc088.png
[http_www.cnblogs.com_wangmeijian_p_4979452.html]: http://www.cnblogs.com/wangmeijian/p/4979452.html