美文网首页
AngularJS 过滤器

AngularJS 过滤器

作者: Undefined_C | 来源:发表于2017-08-21 19:35 被阅读0次

1、uppercase,lowercase 大小写转换

{{"lower cap string"|uppercase}}// 结果:LOWER CAP STRING

{{"TANK is GOOD"|lowercase}}// 结果:tank is good

2、date 格式化

{{1490161945000|date:"yyyy-MM-dd HH:mm:ss"}}// 2017-03-22 13:52:25

3、number 格式化(保留小数)

{{149016.1945000|number:2}}

4、currency货币格式化

{{250|currency}}// 结果:$250.00

{{250|currency:"RMB ¥ "}}// 结果:RMB ¥ 250.00

5、filter查找

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集

// 查找name为iphone的行

{{[

{"age":20,"id":10,"name":"iphone"},

{"age":12,"id":11,"name":"sunm xing"},

{"age":44,"id":12,"name":"test abc"}

]|filter:{'name':'iphone'}}}

6、limitTo 截取

{{"1234567890"|limitTo:6}}// 从前面开始截取6位

{{"1234567890"|limitTo:-4}}// 从后面开始截取4位

7、orderBy 排序

// 根id降序排

{{[  {"age":20,"id":10,"name":"iphone"},

{"age":12,"id":11,"name":"sunm xing"},

{"age":44,"id":12,"name":"test abc"}

]|orderBy:'id':true}}

// 根据id升序排

{{[  {"age":20,"id":10,"name":"iphone"},

{"age":12,"id":11,"name":"sunm xing"},

{"age":44,"id":12,"name":"test abc"}

]|orderBy:'id'}}

自定义过滤器

以下实例自定义一个过滤器reverse,将字符串反转:

varapp=angular.module('myApp',[]);

app.controller('myCtrl',function($scope){

             $scope.msg="Runoob";

});

app.filter('reverse',function(){//可以注入依赖

           returnfunction(text){

                        returntext.split("").reverse().join("");

           }

});

相关文章

网友评论

      本文标题:AngularJS 过滤器

      本文链接:https://www.haomeiwen.com/subject/yvyhdxtx.html