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 () { ...
随机推荐
- nw335 debian sid x86-64 --3 linux内核自带
nw335 debian sid x86-64 --3 linux内核自带
- 关于security的简单理解和应用
2018年7月30日1.搜索引擎框架百度google Lucene 单机操作,就是一堆jar包中的api的使用,自己干预,如何创建索引库,删除索引库,更新索引库,高亮,自己调度APISolr 支持we ...
- 浅谈 HTTP 协议
一. HTTP简介 超文本传输协议 Hyper Text Transfer Protocol 是一种用于分布式.协作式和超媒体信息系统的应用层协议 HTTP是万维网的数据通信的基础 HTTP有很多应用 ...
- Mac下Python和Pycharm之virtualenv
一.python如何配置virtualenv 1.安装virtualenv pip3 install virtualenvpip install -i https://pypi.tuna.tsin ...
- UIDatePicker 显示时间和打印时间不一样
默认是时区为0,如下格式化一下就好啦 UIDatePicker *datePiker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 100, ...
- 面试准备——java设计模式
1 总体来说,设计模式分为三大类: 设计模式(design pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 创建型模式(五种):工厂方法模式.抽象工厂模式.单例模式. ...
- C# 字符串型转数字型
// 当需要将字符串格式的数字转为数字时候,我们会用到的函数为Convert.ToDouble(),// 然而当你的字符串为49,9时,由于包含了逗号,函数会将逗号忽略,直接转为499,// 所以我们 ...
- 有关php启动时候报错信息
1 : An another FPM instance seems to already listen on /tmp/php-cgi.sock有关/tem/php-cgi.sock问题查看进程可以或 ...
- 【bzoj3231】[Sdoi2008]递归数列 矩阵乘法+快速幂
题目描述 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1ai-1 + c2ai-2 + ... + ckai-k 其中bj和 cj ...
- BestCoder Round #36
HDU5198 Strange Class 问题描述 在Vivid的学校里,有一个奇怪的班级(SC).在SC里,这些学生的名字非常奇怪.他们的名字形式是这样的anbncn(a,b,c两两不相同.).例 ...