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 ...
随机推荐
- P2P直连？经服务器中转？
当同一个系统的两个客户端A.B相互发送消息给对方时,如果它们之间存在P2P通道,那么消息传送的路径就有两种:直接经P2P通道传送.或者经服务器中转.如下图所示: 通常就一般应用而言,如果P2P通道能够 ...
- Chapter 15_0 模块和包
通常,Lua不会设置规则,相反会提供很多强有力的机制来使开发者有能力实现出最适应的规则. 然而,这种方法对于模块就不行了.模块系统的一个主要目标是允许以不同的形式来共享代码. 但若没有一项公共的规则就 ...
- SEO优化技巧总结
SEO优化技巧总结 一:了解搜索引擎 基础知识 搜索引擎:由蜘蛛程序沿着链接爬行和抓取网上的大量页面,存进数据库,经过预处理,用户在搜索框 输入关键词后,搜索引擎排序从数据库中挑选出符合搜索关键词要求 ...
- 华中农业大学新生赛C题
http://acm.hzau.edu.cn/problem.php?id=1099 题意: 输入两个整数 l 和 n,代表半径和output的保留小数点位数. 输出圆的面积,保留n位小数. 一开始觉 ...
- 进入BIOS SHELL DUMP 命令
LINUX系统 进入SHELL 输入命令 fs1: or fs0: 就进入了U盘目录 然后输入 ACPIRW.efi -d -s dsdt.bat 就会产生结果到U盘 ——————————————— ...
- Nginx 安装(CentOS )
一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.首先要安装 PCRE ...
- Sql sever 常用语句（续）
distintct: 查询结果排除了重复项(合并算一项)--如查姓名 select distinct ReaName from UserInfo 分页语句:(查询区间时候应该查询出行号,作为分页的 ...
- C#未将对象引用设置到对象的实例
未将对象引用设置到对象的实例,这个错误的意思是对象为null,但你还要去取里面的值,所以计算机就不干了.解决办法一般是:用一个你不能确定是不是为null的对象时,尽量做个判断.if(object!=n ...
- 第十一节，编辑器软件PyCharm 5.0.3
编辑器软件PyCharm 5.0.3 设置 主题方案 字体大小 行距 文件模板 文件编码 版本切换
- div+css位置绝对定位和相对定位
position:absolute: 当div中被隔着些元素的话那么用此方法将把元素重叠在一起,所以元素可以不在容器中加也能重叠在一起