AngularJS 之 过滤器 Filter

Posted 2020-10-07 LikWin

一、内置过滤器

　　1、大小写转换：

　　uppercase、lowercase

 {{"lower cap string"| uppercase }}
 {{"Tank Is GOOD"| lowercase}}  

　　2、json格式化（将对象转换成json字符串）,默认输出就是json字符串：

    {{ {name:‘zhangsan‘,age:15} }}  
    {{ {name:‘zhangsan‘,age:15}|json }}  

　　3、number格式化：

    {{1.2345|number:1}}  　　// 1.2

    {{1.2345|number:3}}  　　// 1.235

    {{1234567|number}}  　　// 1,234,567

　　4、currecy货币格式化：

    {{500|currency}}  　　　　　　　　// $500.00 

    {{250|currency:‘RMB ￥ ‘}}  　　// RMB ￥ 250.00

　　5、date格式化：

    var app = angular.module(‘myApp‘, []);  
    app.controller(‘myCtrl‘, function ($scope) {  
        $scope.dateOne = new Date();  
        console.info(new Date().toJSON());  
        $scope.dateTwo = new Date().toJSON();  
        // /Date(1464941268937)/  
        $scope.dateThree = ‘1464941268937‘;  
    });  

　　

    {{ 1304375948024 |date}}  　　　　　// May 3, 2011 

    {{ dateOne |date:‘hh:mm:ss‘}}  　　// 09:19:20

    {{ dateTwo |date:‘yyyy-MM-dd hh:mm:ss‘}}  　　// 2017-09-19 09:19:20

    {{ dateThree |date:‘yyyy年MM月dd日‘}}  　　　　// 2016年06月03日

　　6、filter查找：

    //查找含有有4的行  

    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}]  
     | filter:‘4‘ }}  

    //查找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‘} }}  

　　

    //查找含有有4的行 
    [{"age":44,"id":12,"name":"test abc"}] 

    //查找name含有iphone的行 
    [{"age":20,"id":10,"name":"iphone"}]

　　7、limitTo 字符串或对象的截取：

    {{‘i want you‘| limitTo:3}}  　　// i w

    {{‘i want you‘| limitTo:-3}}  　 // you

    {{[1,3,5]|limitTo:1}}  　　　　　　// [1]
 
    {{[1,3,5]|limitTo:-1}}  　　　　　// [5]

　　8、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‘}}           

　　

    //根据id降序排 
    [{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]

    //根据id升序排 
    [{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

　　

二、自定义过滤器

　　

    var app = angular.module(‘myApp‘, []);
    app.controller(‘myCtrl‘, function($scope) {
        $scope.msg = "Runoob";
    });
    app.filter(‘reverse‘, function() { //可以注入依赖
        return function(text) {
            return text.split("").reverse().join("");
        }
    });