angularJs 过滤器
2015-08-13 22:30
691 查看
一.AngularJs内置过滤器
1.currency:将一个数值格式化为货币格式.
结果:
结果:
太多了 不举了.
json:可以讲一个JSON或javascript对象转换成字符串.
limitTo:会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取.
lowercase,uppercase:字符串装换成大小写
number:过滤器将数字格式化成文本,第二个参数是用来控制小数后面的位数,如果传入了一个非数字字符,会返回字符串.
二.filter
filter过滤器可以从给定的数组中选择一个子集,并将其生成一个数组返回.
这个过滤器的第一个参数可以是字符串,对象,函数.
字符串:返回数组中包含这个字符串的元素.如果我们想返回不包含该字符串的元素,在参数前面添加"!"符号.
对象:
函数:
filter的第二个参数可以使一下三种:
true:用angular.equals(expected,actual)对两个值经行严格比较
false:经行不区分大小写的字符串比较.
函数:运行这个函数,如果返回true或真,就接收这个元素.
自定义过滤器:
1.currency:将一个数值格式化为货币格式.
<h1>{{12.9|currency}}</h1> <!--自定义--> <h1>{{12.9|currency:"@"}}</h1>
结果:
$12.90
@12.90
2.date.<h1>{{today|date:"medium"}}</h1> <h1>{{today|date:"short"}}</h1> <h1>{{today|date:"fullDate"}}</h1> <h1>{{today|date:"longDate"}}</h1> <h1>{{today|date:"mediumDate"}}</h1> <h1>{{today|date:"shortDate"}}</h1> <h1>{{today|date:"mediumTime"}}</h1> <h1>{{today|date:"shortTime"}}</h1>
结果:
Aug 13, 2015 9:44:41 PM
8/13/15 9:44 PM
Thursday, August 13, 2015
August 13, 2015
Aug 13, 2015
8/13/15
9:44:41 PM
9:44 PM
..........太多了 不举了.
json:可以讲一个JSON或javascript对象转换成字符串.
<h2>{{{'name':'思思博士',age:25}|json}}</h2>
limitTo:会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取.
<h2>{{'思思博士'|limitTo:2}}</h2>==>思思 <h2>{{'思思博士'|limitTo:-2}}</h2>==?>博士 <h2>{{['a','b','c','d','e']|limitTo:3}}</h2>==>['a','b','c']
lowercase,uppercase:字符串装换成大小写
number:过滤器将数字格式化成文本,第二个参数是用来控制小数后面的位数,如果传入了一个非数字字符,会返回字符串.
二.filter
filter过滤器可以从给定的数组中选择一个子集,并将其生成一个数组返回.
这个过滤器的第一个参数可以是字符串,对象,函数.
字符串:返回数组中包含这个字符串的元素.如果我们想返回不包含该字符串的元素,在参数前面添加"!"符号.
<h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'n'}}</h2> <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'!n'}}</h2>
对象:
<!-- ps:下面这个例子我一直都没跑通,有知道的可以告知我一声 --> <h2>{{[{'name':'Ari','age':24},{'name':'Ari','age':25}]|filter:{'age':24}}}</h2>
函数:
<h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:isCapitalized}}</h2> js代码: $scope.isCapitalized=function(str){ return str[0]==str[0].toUpperCase(); } 结果: ["Ari","Lerner","To","Eat","Pizza"]
filter的第二个参数可以使一下三种:
true:用angular.equals(expected,actual)对两个值经行严格比较
<h2>{{['gUoyansi','guo','gsi']|filter:'gsi':true}}</h2> 结果是: ["gsi"]
false:经行不区分大小写的字符串比较.
<h2>{{['gUoyansi','guo','gsi']|filter:'u':false}}</h2> 结果是: ["gUoyansi","guo"]
函数:运行这个函数,如果返回true或真,就接收这个元素.
<h2>{{['gUoyansi','guo','gsi']|filter:'u':gys}}</h2> js代码: $scope.gys=function(str){ if(str.indexOf('u')>-1){ return true; } }
自定义过滤器:
<h2>{{'guoyansi'|myUpper}}</h2>
var myAppModel=angular.module('myApp.filters',[]); myAppModel.filter("myUpper",function(){ return function(value){ if(value){ return value[0].toUpperCase()+value.slice(1); } } })
相关文章推荐
- AngularJS实践(介绍)
- AngularJS实践(01)
- AngularJS(三)——在多个AngularJS controller之间共享数据
- JS 前端框架 AngularJS 国际化
- AngularJS[ng-include]实现页面共用
- AngularJS 学习(-)Hello world
- AngularJS开发指南05:指令
- Promise in AngularJS
- AngularJS Resource:与 RESTful API 交互
- AngularJS 表单(ng-form)验证
- AngularJs 初级入门 学习笔记
- ng-switch指令
- ng-repeat指令
- Angularjs相关理论
- AngularJS基本指令
- AngularJS深入(2)——模块化
- AngularJS深入(1)——加载启动
- AngularJs动态增减class样式——ng-class
- AngularJs获取焦点与失去焦点时的表单验证
- AngularJs 取消对 html 字符串标签转义