angularJs中的filter过滤器


后端

零度逍遥

2015-08-30 02:22:37

filter过滤器是angular中一个很实用的工具,通过它我们可以很简单的对我们的数据进行格式化,看例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script>
	<script>
	angular.module('demo',[])
	.filter('spillOver',function(){
		return function(item,len){
			var len = len||5;
			item = item.toString();
			if(item.length>len){
				return item.substr(0,len) + '……';
			}
			return item;
		}
	})
	</script>
</head>
<body ng-app='demo'>
		<p>{{1440838384000 | date:'yyyy-MM-dd HH:mm:ss'}}</p>
		<p>{{'每日每夜' | spillOver:'3'}}</p>
		<p>{{'没有人还在这里'|spillOver:'6'}}</p>
		<p>{{'没有人还在这里'|spillOver}}</p>
</body>
</html>
运行效果如下:

angular的filter演示

演示中的date是angular的内置filter,spillOver是我自定义的filter,具体的代码可以参见js部分,还是很灵活的,默认的第一个参数就是管道符号“|”左边的字符串,而后面的参数可以通过自定义filter:传入。