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 ...
随机推荐
- HDU 4520 小Q系列故事――最佳裁判(STL)
小Q系列故事——最佳裁判 Problem Description 过去的2012年对小Q来说是很悲催的一年,失恋了12次,每次都要郁闷1个来月. 好在小Q是个体育迷,在最痛苦的时候,他常常用观看各种体 ...
- IE6下的bug
一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解 ...
- GitHub赠送DigitalOcean优惠码100美元
著名的项目托管网站GitHub本周联合DigitalOcean VPS和NameCheap送给学生福利了!十余种产品免费拿!包括免费赠送digitalocean优惠码价值100美元!以及nameche ...
- 关于WM_NCHITTEST消息
我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消息大概如下: 通常,我们拖动对话框窗口的标题栏来移动窗口,但有时候,我们想通过鼠标在客户区上拖动来移动窗口. 一个容易想到的方案 ...
- 【Machine Learning in Action --5】逻辑回归（LogisticRegression）
1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...
- Oracle 获取当天数据
where trunc(to_date(DATETIME,'yyyy-MM-dd hh24:mi:ss'))=trunc(sysdate)
- 移动端日历控件 mobiscroll 的简单使用、参数设置
mobiscroll 在性能方面比较好,可选用多种效果,滑动效果也比较顺畅. 提供样式文件和js文件,直接点击下载,该版本是 mobiscroll 2.13的 官方地址 :https://docs ...
- fs模块主要功能小解
打开文件: fs.open(path, flags[, mode], callback) path: 要打开的文件的路径 flags: 文件打开的行为 解析: r 读取 w 写入并删除原内容 + r+ ...
- UVA 11021 /概率
题意: 有k只鸟,每只鸟只能活一天,它可以在死之前生[0,n-1]只鸟,生出x只鸟的概率是p[x].问m天后所有的鸟都时光的概率.(m天之前就死了的也算上). 输入:T.n.k.m. 题解: 每只鸟的 ...
- java代理的深入浅出(三)-JavaAssist，ASM
简介 类似字节码操作方法还有ASM.几种动态编程方法相比较,在性能上Javassist高于反射,但低于ASM,因为Javassist增加了一层抽象.在实现成本上Javassist和反射都很低,而ASM ...