AngularJs过滤器

最新推荐文章于 2023-07-16 21:39:09 发布

风火一回

最新推荐文章于 2023-07-16 21:39:09 发布

阅读量947

点赞数

分类专栏： AngularJs 文章标签： angularjs filter

本文链接：https://blog.csdn.net/mafan121/article/details/48730063

版权

AngularJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AngularJS过滤器用来格式化输出给用户的数据。除了格式化数据，过滤器还能修改DOM。例如对css样式的增加删除。

创建过滤器：

在你的模块中注册一个新的过滤器（可注入的）工厂函数就行了。这个工厂函数必须返回一个新的过滤器函数，这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。

过滤器一般在需过滤的值后用|声明，可以通过：附带额外参数。

例如：{{color|colorFilter:name}},color为需过滤的元素，它将自动传递到过滤器中，colorFilter为过滤器的名称，name为传递的过滤参数。

多个过滤器仍用|隔开，依次执行，例如：{{color|colorFilter1:name1:name2|colorFilter2}}

系统自带的内置过滤器：

currency：货币过滤器，将变量转换为货币表现形式

uppercase/lowercase：字母大小写过滤器

date：日期过滤器,例如：{{20151001142358|date:"MM/dd/yy @h:mma"}}

json：json过滤器

自定义过滤器：

angular.module("模块名",[]).filter('过滤器名称',function(){

return function(要过滤的元素值，参数1，参数2，...){

//逻辑处理

}

})

注意：过滤器接收的返回值只能是一个function函数或者一个对象。

使用过滤器：

同一个应用不能多次启动，所以当控制器，过滤器同时存在时，可以使用链式结构，可以点单独创建，然后用模块拼接而成。

下面是一个由输入值来过滤li中的元素显示的例子：

HTML：

<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="testapp">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="../../js/angular-1.4.0-rc.2/angular.js"></script>
<script src="../../js/test/controller.js"></script>
</head>
<body>
	<div data-ng-controller="testController">
		<span>姓名：</span>
		<input type="text" data-ng-model="name">
		<div>颜色：</div>
		<ul>
			<li data-ng-repeat="color in colorList">{{color.name|colorEn:name}}</li>
		</ul>
	</div>
</body>
</html>

controller.js

angular.module("testapp",[]).controller("testController",function($scope){
	$scope.colorList=[
	     {
	    	 name:"红色",
	    	 color:"red"
	     },
	     {
	    	 name:"黑色",
	    	 color:"black"
	     },
	     {
	    	 name:"绿色",
	    	 color:"green"
	     },{
	    	 name:"黄色",
	    	 color:"yellow"
	     }
	  ];
}).filter('colorEn',function(){
	return function(colorName,inputName){
		if(colorName == inputName){
			return colorName;
		}
	}
});

效果图：

风火一回

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs过滤器

AngularJS过滤器用来格式化输出给用户的数据。除了格式化数据，过滤器还能修改DOM。例如对css样式的增加删除。创建过滤器：在你的模块中注册一个新的过滤器（可注入的）工厂函数就行了。这个工厂函数必须放回一个新的过滤器函数，这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。过滤器一般在需过滤的值后用|声明，可以通过：附带额外
复制链接

扫一扫