Blackie的失敗筆記

前言

今天要介紹的Filter可以幫我們做一些資料呈現上的過濾與處理，善用Filter的特性我們可以少寫很多不必要的程式歐！

Filter

Angular Filter是一個可以幫我們把資料做過濾後呈現給使用者看的一項功能，方便的是她只要加一行過濾語法到HTML Element上就可以直接使用了，可以幫我們節省很多不必要的程式開發時間。

只要透過下面這樣的過濾方式即可，expression是我們要呈現的資料，filter是我們的過濾條件：

{{ expression | filter }}

你也可以挂多重條件：

{{ expression [| filter_name[:parameter_value] ... ] }}

一般在HTML binding使用外也可以用JavaScript去控制

$filter('filter')(array, expression, comparator)

而除了使用既有的過濾功能，你也可以自己創造過濾函示的條件：

angular.module('MyReverseModule', []).
filter('reverse', function() {
    return function(input, uppercase) {
    var out = "";
    for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
        out = out.toUpperCase();
    }
    return out;
    }
});

上面這個是官方的範例，主要是建立一個reverse的過濾器，然後可以接受optional 的argument:uppercase，如果有多帶入這個參數再幫你做進階處理。

Filter API List

Example

JS Bin

除了上面這個簡單的之外，一定要看這個官網範例(超實用電話簿查詢效果)

結語

看完上述介紹大家一定覺得自己的code可以少很多行而開始大笑了吧！Day-13 over!