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 () { ...
随机推荐
- poj--2139
Description The cows have been making movies lately, so they are ready to play a variant of the famo ...
- PAT Basic 1054
1054 求平均值 本题的基本要求非常简单:给定 N 个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个“合法”的输入是 [−1000,1000] 区间内的实数,并且最多精确到小数点后 ...
- [uiautomator篇]recent
def Recent(self): d = Device('9410519008004c22098b') displayWidth = int(d.info.get("displayWidt ...
- redis主从复制以及SSDB主主复制环境部署记录（四）
redis配置主从和ssdb主主复制 参考:散尽浮华Linux下Redis主从复制以及SSDB主主复制环境部署记录 只做自己查阅. 环境要求:三台虚拟机一台做主,两台做从. 通过SSDB在redis做 ...
- URAL Formula 1 ——插头DP
[题目分析] 一直听说这是插头DP入门题目. 难到爆炸. 写了2h,各种大常数,ural垫底. [代码] #include <cstdio> #include <cstring> ...
- POJ 1006 生理周期【数论】
这题是有中文版的(右上角选项卡里把default改成简体中文)然后看到他把biorhythms翻成生理周期我可耻的笑了......23333 如果没有限定从日期d开始,完全可以从第一天起开始计时,因此 ...
- tomact和eclipse的关联
tomact和eclipse的关联有很多文档,这里说下下面的问题: 问题: tomact安装成功,点击startup.sh能正常访问,通过eclipse启动后,不能打开8080页面 解决: l 重 ...
- 【霍夫曼树】 poj 1521 Entropy
poj.org/problem?id=1521 注意只有特殊情况:只有一种字母 #include<iostream> #include<cstdio> #include< ...
- essential c++ 随笔
编写一个C++程序: vector初始化两种方法: vector<int>elem_seq(seq_size); elem_seq[0]=1 elem_seq[1]=2; 另一种方法则是利 ...
- php 学习随笔
---恢复内容开始--- round进行格式化数值(进位规则遵守“四舍六入五双”,即前一位是奇数,则进一,前一位是偶数则舍入,因此,rount(1.5)=2,round(2.5)=2,round(0. ...