AngularJS学习第N天（过滤器篇）

最新推荐文章于 2024-10-01 20:12:28 发布

搬砖的肖傲楠

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量172

点赞数

分类专栏： AngularJs 文章标签： angularjs 过滤器 javascript js

本文链接：https://blog.csdn.net/qq_43591363/article/details/107427049

版权

AngularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

4 过滤器

文章目录

4 过滤器

可使用一个管道字符（|）将过滤器添加到表达式或指令中，过
滤器可以对表达式或指令值做进一步的转换处理。

4.1 内置过滤器

AngularJS内置了大量过滤器，这些过滤器都可以完成特定功
能。表5.1显示了AngularJS内置的过滤器。

表5.1 AngularJS内置过滤器
所有内置过滤器看我另一篇文章：https://blog.csdn.net/qq_43591363/article/details/107153617

4.2 在表达式中使用过滤器

由前述可知，过滤器既可在HTML模板的表达式中使用，也可在JavaScript脚本中使用。下面先示范在HTML模板的表达式中使用过滤器。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>AngularJs过滤器</title>
		<!--引入一个Javascipt	函数库-->
		<script type="text/javascript" src="../angular.js">
		</script>
	</head>
	<body ng-app="zkApp">
		<div ng-controller="zkCtrl">
			价格:<input type="text" ng-model="price" /><p>
			默认格式:{{price | number}} <p>
			保留小数点后两位:{{price | number : 2}} <p>
			不保留小数部分: {{price | number : 0}} <p>
			保留小数点后3位: {{price | number : 3}} <p>
			默认货币: {{price | currency}} <p>
			中国货币: {{price | currency : "YUAN￥"}} <p>
			中国货币(不保留小数): {{price | currency : "YUAN￥" : 0}} <p>
			
		</div>
		<script type="text/javascript">
			//用名称来创建模块
			var app = angular.module("zkApp",[]);
			//根据名称注册控制器
			app.controller("zkCtrl",function(){
			});
		</script>
	</body>
</html>

在该页面代码中，粗体字代码使用nunber、currency两个过滤器
分别对price进行转换。在浏览器中浏览该页面，可以看到下图所示的转换结果。
在这里插入图片描述
下面代码示范了同时在HTML模板的表达式和JavaScript中使用过
滤器。

<body ng-app="zkApp" ng-controller="zkCtrl">
		转换小写: {{s | lowercase}} <p>
		转换大写: {{s | uppercase}} <p>
		获取前4个字符: {{s | limitTo : 4}} <p>
		获取后4个字符: {{s | limitTo : -4}} <p>
		从第2个字符开始，获取4个字符: {{s | limitTo : 4 : 2}} <p>
		<script type="text/javascript">
			//用名称来创建模块
			var app = angular.module("zkApp",[]);
			//根据名称注册控制器
			app.controller("zkCtrl",function($scope,$filter){
				$scope.s = "Hello,AngularJs!";
				//转换大写
				console.log($filter('uppercase')($scope.s));
				//转换小写
				console.log($filter('lowercase')($scope.s));
				//获取前四个字符
				console.log($filter('limitTo')($scope.s,4));
				//获取后四个字符
				console.log($filter('limitTo')($scope.s,-4));
				//从第2个字符,开始获取4个字符
				console.log($filter('limitTo')($scope.s,4,2));
			});
		</script>
	</body>

从粗体字代码可以看出，如果要在JavaScript中使用过滤器，总
是要使用$filter（）服务获取指定过滤器，然后使用过滤器对数据执
行转换。
在这里插入图片描述
下面示范orderBy、filter两个过滤器的用法。

<body ng-app="zkApp" ng-controller="zkCtrl">
		根据年龄排序（升序）: {{arr | orderBy : 'age' : json}} <p>
		根据年龄排序（降序）: {{arr | orderBy : '-age' : json}} <p>	
		根据name属性过滤: {{arr | filter : '悟' : null : 'name'}} <p>
			
		<script type="text/javascript">
			//用名称来创建模块
			var app = angular.module("zkApp",[]);
			//根据名称注册控制器
			app.controller("zkCtrl",function($scope){
				$scope.arr = [{name : '孙悟空', age:500},
				              {name : '唐僧', age:50},
				              {name : '白龙马', age:100},
				              {name : '猪八戒', age:5}];
			});
		</script>
	</body>

在该页面代码中，第一行粗体字代码调用了orderBy过滤器，并
为该过滤器传入一个′age′参数，这表明功能程序将会根据age执行升
序排列；第二行粗体字代码调用了filter过滤器，并为该过滤器传入三
个参数，第三个参数指定对name属性进行过滤，第一个参数指定过
滤规则为只保留name属性中包含“悟”字的数组元素。
在这里插入图片描述

4.3 在指令中使用过滤器

除了在HTML模板和JavaScript中使用过滤器之外，AngularJS也
允许在指令中使用过滤器。在指令中使用过滤器和在HTML模板中使用过滤器的方法大致相同。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>AngularJs过滤器</title>
		<!--引入一个Javascipt	函数库-->
		<script type="text/javascript" src="../angular.js">
		</script>
	</head>
	<body ng-app="zkApp" ng-controller="zkCtrl">
		选择日期: <input type="datetime-local" ng-model="myDate" /> <p>
		自动格式化: <span ng-bind="myDate | date" ></span> <p>
                指定格式格式化: <span ng-bind="myDate | date : 'yyyy年MM月dd日'"></span> <p>
                指定格式格式化: <span ng-bind="myDate | date : 'yyyy年MM月dd日 HH时mm分'"></span> <p>
		<script type="text/javascript">
			//用名称来创建模块
			var app = angular.module("zkApp",[]);
			//根据名称注册控制器
			app.controller("zkCtrl",function($scope){
				
			});
		</script>
	</body>
</html>

在这段代码中，在ng-bind指令中使用了AngularJS过滤器，由粗
体字代码可以看出，在指令中使用过滤器与在HTML模板中使用过滤器的方法基本相同。在浏览器中浏览该页面，可以看到如图所示的效果：
在这里插入图片描述

4.4 自定义过滤器

由前述可知，所谓的过滤器，其实就是一个简单的转换器，而这个转换器无非就是一个函数。从这个意义上来看，AngularJS转换器其实就是一个转换函数的别名。既然如此，开发者当然也可以开发自定义的转换器。AngularJS的模块提供一个filter（）方法，该方法用于注册自定义过滤器。filter（）方法接受两个参数：第一个参数用于指定过滤器的名字；第二个参数指定过滤器对应的转换函数。

下面的示例将会自定义一个过滤器，该过滤器用于从字符串
中“剔除”中间一段。该示例代码如下。

	<body ng-app="zkApp" ng-controller="zkCtrl">
		请输入字符串: <input type="text" ng-model="test" /> <p>
		{{test | zkdelete : 2 : 5}}
		<script type="text/javascript">
			//用名称来创建模块
			var app = angular.module("zkApp",[]);
			//根据名称注册控制器
			app.controller("zkCtrl",function($scope,$filter){
				console.log($filter('zkdelete')("zdk.com",2,4));
			});
			//自定义过滤器
			app.filter("zkdelete",function(){
				return function(input,start,end)
				{
					if(!input){
						input = "";
					}
					//如果没有指定start，让start等于0
					if (!start) {
						start = 0;
					}
					//如果没有指定end，让end等于字符串长度
					if (!end) {
						end = input.length;
					}
					//如果start大于end直接返回input(不做任何处理)
					if(start > end){
						return input;
					}
					return input.substring(0,start) + input.substring(end,input.length)
					
				}
			})
		</script>
	</body>

在该程序中，粗体字代码调用AngularJS模块的filter（）方法注
册了一个fkdelete过滤器，该过滤器对应的转换函数就是后面定义的函数。注册了fkdelete过滤器之后，即可在HTML模板的表达式中使用它了，也可在JavaScript脚本中使用该过滤器。使用浏览器浏览该页
面:
在这里插入图片描述