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>执行结果
angularJS---自己定义过滤器的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- angularJS之使用过滤器转化输出 (angularJS系列最后一篇)
在视图模板中使用过滤器 过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示. 过滤器可以在模板中的{{}}标记中使用: {{ expression | filter:arg1:ar ...
- 你知道用AngularJs怎么定义指令吗？
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- Servlet学习笔记（七）—— 自己定义过滤器的编写改进：自己定义实现FilterChain
笔记六中实现了三种过滤器:字符编码过滤.登录权限过滤.敏感词过滤,可是有个缺陷就是,限定了过滤顺序,而不能实现先进行request过滤.最后response过滤,而且中间几项过滤的顺序不能动态改变.所 ...
- [转]你知道用AngularJs怎么定义指令吗？--很详细
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJS中的过滤器
欢迎大家指导与讨论 : ) 一.前言 AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- angularJS---自定义过滤器
AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用 ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
随机推荐
- shell 几中专用修饰符 :- :+ := ${variable:offset:length}
1.${variable:-word} ${variable:-word} 如果variable已经被设置了,且不为空,则代入它的值,否则代入word; $ fruit=peach $ echo ${ ...
- 脑阔疼的双层SQLserver游标
本来简单的双层游标没啥的,内层游标需要读取的是视图的内容,一直报“当前命令发生了严重错误.应放弃任何可能产生的结果.”的错误.无可奈何尝试先将视图的数据放到表变量中,之后再用游标遍历表变量. 简直很怀 ...
- layer2-1 二层
一 概述 一层的相关介绍 CSMA/CD 网桥和交换机的区别 冲突 共享 端口密度 性能 功能 交换机的三种主流转发方式 存储转发 完整的收到 ...
- numpy之flatnonzero函数
Return indices that are non-zero in the flattened version of a. This is equivalent to a.ravel().nonz ...
- 【Go】并发编程
Go语言宣扬用通讯的方式共享数据. Go语言以独特的并发编程模型傲视群雄,与并发编程关系最紧密的代码包就是sync包,意思是同步.同步的用途有两个,一个是避免多个线程在同一时刻操作同一个数据块,另一个 ...
- 【Luogu】P2617Dynamic Ranking（树状数组套主席树）
题目链接 树状数组套主席树有点难懂qwq 不好理解 树状数组套主席树的直观理解应该是:树状数组的每一个节点是一棵主席树. 普通区间修改我们是创建1个线段树,树状数组套主席树的时候我们就创建log个线段 ...
- [HNOI2008]越狱 (组合数学)
题目描述 监狱有连续编号为 1-N 的 N 个房间,每个房间关押一个犯人,有 M 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱. 输入输出 ...
- 查看Linux每个进程的流量和带宽
原文:https://blog.csdn.net/monkeynote/article/details/45867803 作为一个系统管理员,有时候需要搞清楚一台机器上的哪个进程占用了较高的网络带宽. ...
- 再看c语言之getchar/putchar
- H5 折线图插件
一.可以使用Highcharts,参考网址:https://api.hcharts.cn/highcharts: 二.可以使用Echarts,参考网址:http://echarts.baidu.com ...