angularjs的过滤器

Angularjs内置的过滤器

在html中调用，使用 ｜

• 一个过滤器，不带参数的情况
  
  
  • {{expression | filter}}
• 一个过滤器，带参数的情况
  
  
  • {{expression | filter:arguments}}
• 一个过滤器，带多个参数的情况
  
  
  • {{expression | filter: arg1: arg2: ...}}
• 多个过滤器，不带参数的情况
  
  
  • {{expression | filter1 | filter2 | ...}}

{{ 6666 | currency: "$"}}

{{ today | date: "yyyy - mm - dd HH:mm::ss"}}


在controller中使用

var app = angular.module('app', []);
app.controller('MainContainer', function($scope, $filter){
        var time = (new Date()).valueOf();
        $filter(date)(time, 'yyyy-MM-dd');
        var string = 'Hello world';
        $filter('uppercase')(string);
})

自定义过滤器

    var app = angular.module('app', []);
    app.controller('mainCtrl', function(){
    
    });
    
    app.filter('addString', function(){
        return function(input, stringOne, stringTwo){
            return input + ' ' + stringOne + ' ' + stringTwo;
        }
    })
    
    index.html
    
    {{ 'Hello' | addString:'world':'!!!' }}
    // 'Hello world !!!'

过滤器优化

位于视图中的每个过滤器至少被调用2次，这是过滤器的本质。因此越是保持这些函数轻量及对它们进行优化，应用程序就会更快。

《Angular权威教程》里面对过滤器的优化提出了2种途径

一. 避免在视图中使用过滤器，尽可能在过滤逻辑移至控制器或服务中
二. 缓存过滤器的执行结果