4、angularJS过滤器
一、过滤器的作用
过滤器用来格式化须要展示给用户的数据。
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。
比如。如果我们希望将字符串转换成大写能够对字符串中的每一个字符都单独进行转换操作。也能够使用过滤器:{{name | uppercase }}
◇给过滤器传參数:
<h3>货币格式</h3>
{{123|currency}}
<H3>小数位数</H3>
{{123.3213132|number:2}}
<H3>大写转换</H3>
{{'tanzhenngqiang'|uppercase}}
<H3>小写转换</H3>
{{'TANZHENGQIANG'|lowercase}}
◆number过滤器将数字格式化成文本。它的第二个參数是可选的。用来控制小数点后截取的位数。
假设传入了一个非数字字符,会返会空字符串
◆能够用|符号作为切割符来同一时候使用多个过滤器。
二、filter过滤器
能够从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通经常使用来过滤须要进行展示的元素。比如,在做client搜索时。能够从一个数组中立马过滤出所需的结果。
这个过滤器的第一个參数能够是字符串、对象或是一个用来从数组中选择元素的函数。
演示样例:
①过滤包括字母e的单词
{{['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
②过滤对象
{{ [
{ 'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza' },
{ 'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indianfood'
}] | filter:{'favorite food': 'Pizza'} }}
③自己定义函数进行过滤
◇isCapitalized函数的功能是依据首字母是否为大写返回true或false。
$scope.isCapitalized= function(str) {
return str[0] == str[0].toUpperCase();
};
使用自己定义过滤函数
{{['Ari','likes','to','travel'] | filter:isCapitalized }}
<!--["Ari"] -->
我们也能够给filter过滤器传入第二个參数,用来指定预期值同实际值进行比較的方式。
第二个參数能够是下面三种情况之中的一个。
◇true
用angular.equals(expected, actual)对两个值进行严格比較。
◇ false
进行区分大写和小写的子字符串比較。
◇函数
执行这个函数,假设返回真值就接受这个元素。
★JSON过滤器
json过滤器能够将一个JSON或JavaScript对象转换成字符串。这样的转换对调试很有帮助,比如:
{{ {'name':'Ari', 'City': 'SanFrancisco'} | json }}
<!--
{
"name": "Ari",
"City": "San Francisco"
}
-->
★limitTo过滤器(截取字符串)
limitTo过滤器会依据传入的參数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的參数,通过传入參数的正负值来控制从前面还是从后面開始截取。
假设传入的长度值大于被操作数组或字符串的长度。那么整个数组或字符串都会被返回。
比如,我们能够截取字符串的前三个字符:
{{ San Francisco is very cloudy | limitTo:3 }}
<!-- San -->
或最后的六个字符:
{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy -->
对数组也能够进行相同的操作。返回数组的第一个元素:
{{ ['a','b','c','d','e','f'] | limitTo:1 }}
<!--["a"] -->
★orderBy过滤器
orderBy过滤器能够用表达式对指定的数组进行排序。orderBy能够接受两个參数,第一个是必需的,第二个是可选的。
第一个參数是用来确定数组排序方向的谓词。
以下分情况讨论第一个參数的类型。
l 函数
当第一个參数是函数时。该函数会被当作待排序对象的getter方法。
l 字符串
对这个字符串进行解析的结果将决定数组元素的排序方向。
能够传入+或-来强制进行升序或降序排列。
l 数组
在排序表达式中使用数组元素作为谓词。对与表达式结果并不严格相等的每一个元素。则使用第一个谓词。
第二个參数用来控制排序的方向(是否逆向)。
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}
结果:
[
{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}
]
也能够对排序结果进行反转。比如,通过将第二个參数设置为true能够将排序结果进行反转:
{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name':true }}
三、自己定义过滤器
创建自己定义过滤器须要将它放到自己的模块中。
◇实现一个过滤器,将字符串第一个字母转换为大写。
过滤器本质上是一个会把我们输入的内容当作參数传入进去的函数。上面这个样例中,我们在调用过滤器时简单地把input当作字符串来处理。
能够在这个函数中做一些错误检查:
angular.module('myApp.filters', []).filter('capitalize',function()
{
returnfunction(input)
{
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
};
});
如今,假设想将一个句子的首字母转换成大写形式,能够用过滤器先将整个句子都转换成小
写。再把首字母转换成大写:
<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize}}
4、angularJS过滤器的更多相关文章
- AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter
今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在 controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...
- AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...
- AngularJS过滤器
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...
- AngularJS学习之旅—AngularJS 过滤器(七)
1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter ...
- AngularJS 1.x系列:AngularJS过滤器(4)
1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...
- AngularJS过滤器filter入门
在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...
- AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- angularjs过滤器(一)------禁止转载------
如果用代码实现:将new Date()转换为 M/D/YY 00:00 格式. 启用过滤器有两种方式:①在HTML中用"|"启用过滤器.格式为{{$scope.property | ...
- 关于angularjs过滤器的小尝试
最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...
随机推荐
- define与typedef的区别
define: 发生在预处理阶段,也就是编译之前,仅仅文本替换,不做任何的类型检查 没有作用域的限制 typedef: 多用于简化复杂的类型声明,比如函数指针声明:typedef bool (*fun ...
- 快速搭建Hadoop及HBase分布式环境
本文旨在快速搭建一套Hadoop及HBase的分布式环境,自己测试玩玩的话ok,如果真的要搭一套集群建议还是参考下ambari吧,目前正在摸索该项目中.下面先来看看怎么快速搭建一套分布式环境. 准备 ...
- 在Django中使用redis:包括安装、配置、启动。
一.安装redis: 1.下载: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 2.解压 tar -zxvf redis-.tar ...
- 模拟测试—moq:简单一两句
在Xunit的基础上,说话模拟测试. 假如我们有这样一个控制器里面有这样一个方法,如图 我们在对Bar测试得时候,如果测试未通过,错误有可能来至于Bar,也有可能错误来至于serverde Foo方法 ...
- webstorm中配置过visualsvn,后面做更改要更换authentication realm的解决办法
找这个找了好久,一直改不过来,终于找到了解决办法 首先,在提交代码时提示: 但是我的authentication realm已经时这个了,并且账号和密码也改了,所以要更改authentication ...
- TensorFlow学习---入门(一)-----MNIST机器学习
参考教程:http://www.tensorfly.cn/tfdoc/tutorials/mnist_beginners.html 数据下载地址:http://wiki.jikexueyuan.com ...
- JS——offset
1.offsetWidth.offsetHeight返回盒子宽度和高度,包括padding与border,不包括margin 2.offsetLeft.offsetTop返回盒子距离定位盒子的x轴方向 ...
- TensorFlow: Could not load requested Qt binding.
使用Eclipse 引入tensorflow,出现 Could not load requested Qt binding. 问题 ImportError: Could not load reque ...
- zabbix配置邮件报警(第四篇)
zabbix配置邮件报警(第四篇) 邮件报警可采用本地邮件服务,也可以自定义脚本,这里我采用本地邮件服务报警 添加收件人
- java主要集合类的数据结构
1).ArrayList ArrayList维护着一个对象数组.如果调用new ArrayList()后,它会默认初始一个size=10的数组. 每次add操作都要检查数组容量,如果不够,重新 ...