如何在angularjs的自定义指令内部定义自定义过滤器?
2017-04-27 21:19
459 查看
今天下班碰到之前的小学妹,看她今天很是烦躁,我们就沟通了一下,原来是上学的时候没有学好AngularJS,有很多不懂的问题,她问了我一个问题,就是怎么使用自定义过滤器? 一听到这个问题,我就有得说了,我就给她写了个案例,基本的使用方法。
其实自定义的过滤器很强大,功能很多,所以我们公司一直有在使用,所以我们团队的人都应该会对它挺了解的,今天就来说说怎么去用它。
1、首先你要很清楚地知道 该用什么去定义一个自定义过滤器?
app.filter(name, fn):用于定义一个自定义过滤器
其中 name:过滤器名称 fn:过滤器处理函数
2 咱们就用一个案列来分析一下
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div ng-bind="name"></div>
<div ng-bind="name | myfilter"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.filter("myfilter", function() {
/*
* 过滤器中,直接return function(value) {}
* 通过闭包函数来实现数据处理,固定语法结构!
* value参数:第一个参数,用于接收要处理的数据:数据就是过滤器管道符前面变量中的数据
*/
return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
/*
* 这一部分主要是用来进行数据处理的
*/
value = value.toUpperCase();
/* 过滤器中数据处理完成,一定要返回输出*/
return value;
}
});
app.controller("myCtrl", function($scope) {
$scope.name = "jerry";
});
</script>
中间注释部分都有解释,应该就会一目了然,要记得最后一定要返回输出
比较常见的就是运用自定义过滤器还原首字母大小写,还有数组去重之类的,如果大家有需要,可以看看~
祝大家开心度过每一天~
其实自定义的过滤器很强大,功能很多,所以我们公司一直有在使用,所以我们团队的人都应该会对它挺了解的,今天就来说说怎么去用它。
1、首先你要很清楚地知道 该用什么去定义一个自定义过滤器?
app.filter(name, fn):用于定义一个自定义过滤器
其中 name:过滤器名称 fn:过滤器处理函数
2 咱们就用一个案列来分析一下
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div ng-bind="name"></div>
<div ng-bind="name | myfilter"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.filter("myfilter", function() {
/*
* 过滤器中,直接return function(value) {}
* 通过闭包函数来实现数据处理,固定语法结构!
* value参数:第一个参数,用于接收要处理的数据:数据就是过滤器管道符前面变量中的数据
*/
return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
/*
* 这一部分主要是用来进行数据处理的
*/
value = value.toUpperCase();
/* 过滤器中数据处理完成,一定要返回输出*/
return value;
}
});
app.controller("myCtrl", function($scope) {
$scope.name = "jerry";
});
</script>
中间注释部分都有解释,应该就会一目了然,要记得最后一定要返回输出
比较常见的就是运用自定义过滤器还原首字母大小写,还有数组去重之类的,如果大家有需要,可以看看~
祝大家开心度过每一天~
相关文章推荐
- 提问:自定义web.config时如何定义架构(Schema)
- JS 自定义函数时,如何定义参数默认值
- 使用AngularJS创建自定义的过滤器的方法
- AngularJs学习笔记__6、自定义过滤器,阿拉伯数字金额转汉字金额
- angularJS---自定义过滤器
- 微软项目管理[EPM]数据库剖析1:如何取得全局项目有哪些自定义的大纲代码定义
- 如何通过自定义注解实现AOP切点定义
- 【AngularJS】—— 9 自定义过滤器
- django “如何”系列4:如何编写自定义模板标签和过滤器
- 【AngularJS】—— 9 自定义过滤器
- JS 自定义函数时,如何定义参数默认值
- 黑马程序员——如何理解当内部类中定义了静态成员,改内部类必须是静态的?
- PHPCMS v9里面,推荐位ID【posid】的值是如何确定的?是自定义的还是官方定义好的?
- 使用AngularJS创建自定义的过滤器的方法
- 如何让DEV PropertyGridControl根据自定义Attribute特性来自定义输入显示
- LQ-300K在Windows 2000和Windows XP操作系统中如何自定义纸张?为何有时看不到自己定义的纸张?
- c# 属性如何自定义,以及为什么要定义属性而不是直接访问公共字段
- angularJS自定义过滤器使用
- Windows下如何自定义服务?如何定义服务相关性?
- angularJS中如何写自定义指令