js框架——angular.js（3）
1. 过滤filter
过滤就是将内容进行筛选或者转换或者两者都有，一般的表示方式就是在变量后面添加"|"，然后加上过滤条件，如——
{{name|currency}}
这个currency过滤器可以将值转变成货币的格式。
另外，这个货币的格式也可以设置——
{{name|currency: "Euro €" }}
这样，输入1234，就会显示：
123，4 Euro €
2. 自定义过滤器
过滤器当然可以自定义，毕竟系统给定的过滤器根本不够用。
<body ng-app="MyApp">
<input type="text" ng-model="text" placeholder="Enter text"/>
<p>Input: {{ text }}</p>
<p>Filtered input: {{ text | reverse }}</p>
</body>
var app = angular.module("MyApp", []);
app.filter("reverse", function(input) {
var result = "";
input = input || "";
for (var i=0; i<input.length; i++) {
result = input.charAt(i) +"_____>" +result;
alert(result)
}
//巧妙的实现字符串翻转
//笨的方法
//var result = input.split('').reverse().join('')
return result;
});
如上就是一个自定义的过滤器，简单来说就是编写一个带有参数的函数，将参数输入后，得到一组返回的数据，这个返回数据就是转换后的字符串。
列举一些常用的过滤器：
exclude：排除
<ul ng-init="names = ['Peter', 'Anton', 'John']">
<li ng-repeat="name in names | exclude:'Peter'">
<span>{{name}}</span>
</li>
</ul>
js框架——angular.js（3）的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js（5）
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- js框架——angular.js
这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...
- js框架——angular.js（2）
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别（个人）
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- 关于php的socket
这里仅记录tcp协议: 关于server: <?php /** * 测试关于php的socket函数 */ /** * 最基本的socket,服务器端: * 创建 * $sock = socke ...
- DigitalOcean VPS简介
DigitalOcean是一家位于美国的云主机服务商,总部位于美国纽约,成立于2012年.由于价格低廉,高性能配置.灵活布置的优势,近些年来发展迅猛,成为中国站长圈们喜爱的品牌.(访问http://w ...
- Sharepoint 的定制 - 代码附加内容编辑器
//来源:http://www.cnblogs.com/codingcow/articles/69143.html Sharepoint是一种非常新而且很有用的技术. 现在微软把基本的功能集成到了Wi ...
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- python基础（三）--列表、元组、字典
一.列表: 有序序列,支持索引.切片.循环(for,while) 元素可以被修改: 元素可以是任何数据类型(数字,字符串,列表,布尔值...),可以嵌套: ##增 1.append(object) ...
- centos 10字母随机文件病毒清理
病毒表现:网络流量暴满,疯狂地向香港的一个IP发数据,同时在top里面表现为随机的10位字母的进程,看/proc里面的信息,则为ls,cd之类常见的命令,CPU利用率也在top之首.杀死该进程后,会再 ...
- GitHub使用指导
GitHub 用过Git的小伙伴想必都知道GitHub是个什么东东,我这里就简单介绍一下吧.Git是一个分布式的版本控制系统,而GitHub可以托管各种Git库,并提供一个Web界面,方便查看Git库 ...
- wcf中的使用全双工通信
wcf中的契约通信默认是请求恢复的方式,当客户端发出请求后,一直到服务端回复时,才可以继续执行下面的代码. 除了使用请求应答方式的通信外,还可以使用全双工.下面给出例子: 1.添加一个wcf类库 2. ...
- JPA基本注解介绍
一.@Entity •@Entity 标注用于实体类声明语句之前, 指出该Java 类为实体类,将映射到指定的数据库表. 如声明一个实体类 Customer,它将映射到数据库中的 customer 表 ...
- unity3d继续尝试
这一次完成了一些复杂的脚本,会了一些简单的鼠标事件,这样就能使用鼠标进行简单的交互了. 其实右边栏目上面一些奇怪的属性看的我是眼花缭乱. 也不知道干啥用的,还有就是真的很佩服里面的物理引擎确实简单易上 ...