angular中filter过滤器主要有两个作用:格式化数据和过滤数据。filter组件共有以下几种:1、currency 2、number 3、date 4、json 5、lowercase 6、uppercase 7、limitTo 8、orderBy 9、filter。
官方API:https://code.angularjs.org/1.4.0-rc.2/docs/api/ng/filter
一 、currency
{{ currency_expression | currency : symbol : fractionSize}}
currency的作用是将值转换为精确小数点的数字,同时在前面添加货币符号,如果值不能转化为数字,会返回空字符
symbol:货币符号,
fractionSize:精确小数位数
$scope.money = 126893.5564;
图中我们可以看到currency默认添加$符号,精确2位小数,会给数字添加逗号
二、number
currency已经包含了number的功能了,同样如果值不能转换为数字,返回空,如果是无穷大返回“∞”
{{ number_expression | number : fractionSize}}
fractionSize:小数点位数
我们可以看到,number默认精确了3位小数
currency和number精确小数时都会发生四舍五入
三、date
关于date的格式化一看官方API简直吓死人,真是太多了,我们就来关注一下我们会用到的,想了解更多的自己可以去看看文档。
- yyyy:表示年份,如2016
- MM:表示月份,如06
- M:同样表示月份,如6,和MM的区别是个位数月份时前面没有0,其他类似
- dd/d:表示天,如今天是06
- HH/H:表示小时,24小时制
- hh/h:同样表示小时,12小时制
- mm/m:分钟
- ss/s:秒
- sss:毫秒
- a :表示AM/PM,没有它的话12小时制时我们怎么知道上午还是下午啊,当然24小时制时仍然可以用它
$scope.today = new Date();
我们可以看到年、月、日、时间的顺序是可以自行调的,连接符也是。之前犯二不解为什么有的是大写字母有的是小写字母,那是因为默认是小写的,但是月份M和分钟m冲突,所以才有大小写混合了。。
四、uppercase、lowercase
这两个确实没什么好说的
$scope.str = 'Hello AngularJs';
五、limitTo
{{ limitTo_expression | limitTo : limit : begin}}
limit:截取长度
begin:开始位置
limitTo的作用类似于string的substr函数,只不过参数颠倒了,注意是substr不是substring,
limitTo不仅可以用于字符串,也可以用于数组,此处仅以字符串举例
六、orderBy
{{ orderBy_expression | orderBy : expression : reverse}}
orderBy的作用是按照某一规则给数组进行排序,可以是普通数组,也可以是对象数组
$scope.items = [{id: 1001, name: '赵云', country: '蜀'}, {id: 1003, name: '关羽', country: '蜀'}, {id: 1002,name: '马超',country: '蜀'}];
从例子2中我们可以看到,orderBy默认按照对象id进行了升序排序,例子3“-id”即按照id进行了降序排序,而例子4可以看出
reverse
为true的作用是反转排序结果,JavaScript中也有reverse函数。普通数组也是可以的
{{[22,34,12,3,56]|orderBy:'':true}}
七、filter
终于到最后一个了,写完就可以回家吃饭了。
看名字就知道filter是过滤作用啦~~还是直接举例子吧
我们看到:
- 例子1中直接filter:"00"匹配到了所有数据,那是因为filter进行的是模糊匹配,只要有一个属性值含有”00“就会匹配到
- 例子2中用filter:{id:'1001'},不出我们所料这次只匹配到了id为1001的数据,其实这里仍然是模糊匹配,如果我们把“1001”改成“001”你试试是不是仍会匹配到
- 忘记告诉item是啥了
$scope.item={}; $scope.item.id='001';
我们用了item.id和item.$进行了匹配,这其实是一种更加灵活的方式,下一节中我们会用到。
八、In JavaScript
我们上面讲的一些都是在html中使用过滤器,其实在JavaScript中也可以。
myApp.controller('filterCtr', ['$scope', '$filter', function ($scope, $filter) {}
我们要先注入$filter,然后我们再讲一个新的过滤器-json
官方说json过滤器的作用就是为了调试用的,也是,要不然谁没事把一个json字符串输出到页面干嘛。
我们来看一下它的效果:
是不是看起来方便多了。
类似的其他过滤器也能在函数里面用:
$scope.test = $filter('currency')(142, 'CNY', 5);
其他类似,可以看看文档,试一下。
而且filter过滤器还能自定义过滤函数,功能会更加强大,类似于ECMAScript5中的filter函数,快去看看。
总结
肚子好饿,我要吃饭去了
github代码地址