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 () { ...
随机推荐
- 【19】javascript有哪些方法定义对象
创建Object的方式有4种. 方式一: 通过对象字面量表示法(又称为直接量.原始方式). var obj = {name:"moyu"}; 方式二: 通过new和构造函数Obje ...
- 【0门槛】PR稿的自我修养
本文来自网易云社区 作者:巩爽 十一过完,离2018年结束就只剩下85天啦!是不是2016年许下的2017年的梦想,在2018年还没有实现? 做过的项目仿佛都小有成就,可惜只是内部自嗨,想做域外宣传却 ...
- Python第三方库之openpyxl(6)
Python第三方库之openpyxl(6) 折线图 折线图允许在固定轴上绘制数据,它们类似于散列图,主要的区别在于,在折线图中,每个数据序列都是根据相同的值绘制的,不同的轴可以用于辅助轴,与条形图类 ...
- SPOJ-Grid ,水广搜easy bfs
SERGRID - Grid 一个水广搜我竟然纠结了这么久,三天不练手生啊,况且我快三个月没练过搜索了... 题意:n*m的方格,每个格子有一个数,意味着在此方格上你可以上下左右移动s[x][y]个格 ...
- 关于ul中li不对齐的问题
将li中加入 overflow:hidden; 即可. 同时overflow:auto 可以控制滚动条的出现.
- 【Luogu】P1199三国游戏（博弈论）
题目链接 来看一波有理有据的分析 三牧小明的那篇 代码 #include<cstdio> #include<cctype> #include<algorithm> ...
- 【Luogu】P3384主席树模板（主席树查询K小数）
YEAH!我也是一个AC主席树模板的人了! 其实是个半吊子 我将尽量详细的讲出我的想法. 主席树太难,我们先搞普通线段树好了 普通线段树怎么做?我的想法是查询K次最小值,每次查完把查的数改成INF,查 ...
- POJ 1502 MPI Maelstrom【floyd】
题目大意:求点1到所有点最短路径的最大值 思路:水题,单源最短路,网上解题清一色dijkstra,但是点数小于100显然floyd更简洁嘛 #include<cstdio> #includ ...
- spring 找不到applicationContext.xml解决方法
初学Spring在用Resource rs=new ClassPathResource("applicationContext.xml");时老是遇到这个错误.后来发现用Appli ...
- go gin框架 static 静态文件
项目结构: DemoPro: .. .. static/ test.txt .. router := gin.Default() router.Static("/static", ...