一.AngularJs内置过滤器
1.currency:将一个数值格式化为货币格式.
1 <h1>{{12.9|currency}}</h1> 2 <!--自定义--> 3 <h1>{{12.9|currency:"@"}}</h1>
结果:
$12.90
@12.90
2.date.
1 <h1>{{today|date:"medium"}}</h1> 2 <h1>{{today|date:"short"}}</h1> 3 <h1>{{today|date:"fullDate"}}</h1> 4 <h1>{{today|date:"longDate"}}</h1> 5 <h1>{{today|date:"mediumDate"}}</h1> 6 <h1>{{today|date:"shortDate"}}</h1> 7 <h1>{{today|date:"mediumTime"}}</h1> 8 <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对象转换成字符串.
1 <h2>{{{'name':'思思博士',age:25}|json}}</h2>
limitTo:会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取.
1 <h2>{{'思思博士'|limitTo:2}}</h2>==>思思 2 <h2>{{'思思博士'|limitTo:-2}}</h2>==?>博士 3 <h2>{{['a','b','c','d','e']|limitTo:3}}</h2>==>['a','b','c']
lowercase,uppercase:字符串装换成大小写
number:过滤器将数字格式化成文本,第二个参数是用来控制小数后面的位数,如果传入了一个非数字字符,会返回字符串.
二.filter
filter过滤器可以从给定的数组中选择一个子集,并将其生成一个数组返回.
这个过滤器的第一个参数可以是字符串,对象,函数.
字符串:返回数组中包含这个字符串的元素.如果我们想返回不包含该字符串的元素,在参数前面添加"!"符号.
1 <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'n'}}</h2> 2 <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'!n'}}</h2>
对象:
<!-- ps:下面这个例子我一直都没跑通,有知道的可以告知我一声 --> <h2>{{[{'name':'Ari','age':24},{'name':'Ari','age':25}]|filter:{'age':24}}}</h2>
函数:
1 <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:isCapitalized}}</h2> 2 js代码: 3 $scope.isCapitalized=function(str){ 4 return str[0]==str[0].toUpperCase(); 5 } 6 结果: 7 ["Ari","Lerner","To","Eat","Pizza"]
filter的第二个参数可以使一下三种:
true:用angular.equals(expected,actual)对两个值经行严格比较
1 <h2>{{['gUoyansi','guo','gsi']|filter:'gsi':true}}</h2> 2 结果是: 3 ["gsi"]
false:经行不区分大小写的字符串比较.
1 <h2>{{['gUoyansi','guo','gsi']|filter:'u':false}}</h2> 2 结果是: 3 ["gUoyansi","guo"]
函数:运行这个函数,如果返回true或真,就接收这个元素.
1 <h2>{{['gUoyansi','guo','gsi']|filter:'u':gys}}</h2> 2 js代码: 3 $scope.gys=function(str){ 4 if(str.indexOf('u')>-1){ 5 return true; 6 } 7 }
自定义过滤器:
1 <h2>{{'guoyansi'|myUpper}}</h2>
1 var myAppModel=angular.module('myApp.filters',[]); 2 myAppModel.filter("myUpper",function(){ 3 return function(value){ 4 if(value){ 5 return value[0].toUpperCase()+value.slice(1); 6 } 7 } 8 })