angularJS---自定义过滤器
AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。
通过使用管道，可以便于双向的数据绑定中视图的展现。
过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。
实现方式
下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule
var myAppModule = angular.module("myApp",[]);接下来在模块的基础上，创建过滤器：
myAppModule.filter("reverse",function(){ });其中reverse是过滤器的名字，后面跟着过滤器的方法声明，在方法中返回另一个方法：
myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});内部返回的方法包含了两个参数，一个是输入的值，就是我们过滤器接受的值。
如果想要实现下面的过滤器：
name | reverse则input就是其中name代表的值。
后面的参数是可选的，我们这里接受uppercase这个bool值，判断是否要进行大小写转换。
内部实现的代码，就没必要解释了。最后返回过滤后的字符串即可。
程序样例
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <div ng-controller="myAppCtrl">
name:{{ name }}<br>
reverse name:{{ name | reverse }}<br>
reverse&uppercase name:{{ name | reverse:true }}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",["$scope",function($scope){
$scope.name = "xingoo";
}]); myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
</script>
</body>
</html>运行结果
版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226
angularJS---自定义过滤器的更多相关文章
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- angularJS自定义过滤器、服务和指令
自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } }); 自定义创建指令 mainA ...
- angularJS自定义 过滤器基础
先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- angularjs自定义过滤器
实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- AngularJS实现的自定义过滤器简单示例
本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
随机推荐
- 如何在os x或ubuntu下安装最新的ruby
os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...
- JAVA加密技术-----MD5 与SHA 加密
关于JAVA的加密技术有很多很多,这里只介绍加密技术的两种 MD5与 SHA. MD5与SHA是单向加密算法,也就是说加密后不能解密. MD5 ---信息摘要算法,广泛用于加密与解密技术,常用于文件校 ...
- obj-c编程10:Foundation库中类的使用(3)[文件管理]
好吧,不管神马系统都无可避免的要说到文件,目录,路径(PATH)管理的内容,下面我们来看看在F库中对他们的支持.我简单看了下,不谈其他光从方法命名来说就多少显得有点复杂,如果和ruby相比就呵呵了. ...
- CDH安装系统环境准备——系统版本和安装包下载地址指南
由于Hadoop深受客户欢迎,许多公司都推出了各自版本的Hadoop,也有一些公司则围绕Hadoop开发产品.在Hadoop生态系统中,规模最大.知名度最高的公司则是Cloudera.接下来的日子里, ...
- List内存分配
当采用默认构造函数List<int> value = new List<int>();实例化一个List<T>对象时,.Net Framework只是在内存中申请了 ...
- Java 理论与实践: 并发集合类
Java 理论与实践: 并发集合类 DougLea的 util.concurrent 包除了包含许多其他有用的并发构造块之外,还包含了一些主要集合类型 List 和 Map 的高性能的.线程安全的实现 ...
- 全面解读Java NIO工作原理(1)
全面解读Java NIO工作原理(1) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...
- 关于如何通过kali linux 攻击以及破解WPA/WPA2无线加密
http://blog.csdn.net/wingstudio_zongheng/article/details/51435212 1.前期准备 1)打开一个终端 执行命令: ifconfig ...
- 与班尼特·胡迪一起攻破浮空城 （HZNU-2264）
与班尼特·胡迪一起攻破浮空城 AC Time Limit: 1 s Memory Limit: 256 MB Description 桐人为了拯救被困在浮空城堡最顶层的亚丝娜,决定从第 ...
- HDU-1017
A Mathematical Curiosity Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...