AngularJS过滤器filter -

bijian1013

浏览: 3244030 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AngularJS过滤器filter

博客分类：

AngularJS

AngularJS filter

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

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

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

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

　　以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，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();
	}])

运行效果：

　　稍微复杂一点的过滤器——‘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>
        <!-- 输出 Hello, Welcome To Iteye! -->
    </body>
	<script type="text/javascript" src="angular1.2.9.js" ></script>
    <script type="text/javascript" src="index02Filter.js" ></script>
</html>

index02Filter.js

var app = angular.module('app',[])
	.controller('myController',['$scope', function($scope){
		$scope.str = 'hello, welcome to iteye!'
	}])
	.filter('capitalize', function(){
		return function(str){
			var arr = str.split(/\s+/);
			for (var i = 0; i < arr.length; i++) {
				arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
			};
			return arr.join(" ")
		}
	})

运行效果：

　　需要注意的是，内置过滤器‘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

var app = angular.module('app',[])
	.factory('floatUtil', function() {
		return {
			/**
			 * 将浮点数num转换为指定位数places的字符串，位数不够时会四舍五入
			 * */
			toFixed: function (num, places) {
				var times = Math.pow(10, places);
				var des = num * times + 0.5;
				var numStr = (parseInt(des, 10) / times) + '';
				var decimalPlaces = this.getDecimalPlaces(numStr); //小数位数
				if (decimalPlaces > 0) {
					numStr = this.addZero(numStr, places - decimalPlaces);
				} else { //整型
					numStr = this.addZero(numStr + '.', places);
				}
				return numStr;
			},
			/**
			 * 为字符串结尾添加指定个零
			 * */
			addZero: function (numStr, zeroNum) {
				var zeroStr = '';
				zeroNum = zeroNum < 0 ? 0 : zeroNum;
				for (var i = 0; i < zeroNum; i++) {
					zeroStr += '0';
				}
				return numStr + zeroStr;
			},
			/**
			 * 获取小数的位数
			 * */
			getDecimalPlaces: function (num) {
				var numStr = num.toString();
				if (numStr.indexOf('.') > -1) {
					return numStr.split('.')[1].length;
				}
				return 0;
			}
		};
	})
	.factory('baseUtil', function(floatUtil) {
		/**
		 * 千位分隔符
		 * */
		function bitSeparator(num) {
			if (num === 0) {
				return '0.00';
			}
			if (!num) {
				return num;
			}
			var numStr = floatUtil.toFixed(num, 2);
			var decimalStr = '';
			if (numStr.indexOf('.') != -1) {//有小数位
				var numArr = numStr.split('.');
				numStr = numArr[0];
				decimalStr = '.' + numArr[1];
			}
			return numStr.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + decimalStr;
		}
		
		return {
			bitSeparator: bitSeparator
		};
	})
	.controller('myController',['$scope', 'baseUtil', function($scope, baseUtil){
		$scope.num = '1352626.32';
		$scope.formatNum = baseUtil.bitSeparator($scope.num);
	}])
	.filter('bitSeparatorFilter', function(baseUtil){
		return function(str){
			return baseUtil.bitSeparator(str);
		};
	})

运行效果：