ng-filter 非常好用。

它會在不動原始資料的情況下，幫你把顯示的資料 format 成不同的樣式。
非常適合處理 Model 顯示在畫面上的情形。
大家最常用到 ng-filter 的時候是處理時間，金額跟列表的部分。

先來介紹一下吧～

ng-filter 在 HTML 上使用方法:

<div>{{ 變數 | filter name }}</div>

變數顯示在畫面前，會先跑 filter 過濾資料格式，再呈現出來。

金額 (currency) 基本用法：

<!--  output ‘$300.00’ -->
​<div>{{ 300 | currency }}</div>

可改變 currency 的點綴字 ($) ，只要在 filter name 後面加 arguments

<!--  output ’NT$ 300.00' -->
​{{ 300 | currency:’NT$ ' }}

時間 (date) 基本用法：

<!--   output Sep 19, 2014 -->
​{{ myDate | date }}

時間後面加 arguments 換是切換時間 format

<!-- output 19/09/2014 -->
​{{ myDate | date:’dd/MM/yyyy' }} 

基本上，在後面加 argument 自行修改樣式就足以應付不同專案需求。

可是，身為台灣人，專案假如是寫給台灣人用的，
總是希望 currency 跟 date 的 default format 就是符合台灣人口味的樣式。
另如，currency 點綴詞變成 NT$ 或 date format 是 yyyy/MM/dd.

每一個國家其實都會有類似的需求，衍生下來 AngularJS 就實作了 ng-filter localization-lite 的需求。
要實作 localization-lite 的話，需要引入 i18n/angular-locale_zh-tw.js。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/i18n/angular-locale_zh-tw.js"></script>

在該 application 下的 filter 就會切換成有地區性的 format。

ex:

<!-- NT$3,000.00  -->
​{{ 300 | currency }}






<!-- 2014/9/19 -->
​{{ myDate | date }}

有幫你寫好中文喔（*註一）

<!-- 19/09/14 (週五） -->
{{ myDate | date:'dd/MM/yy (EEE)' }}

(localization cdn 列表)

列表：

limitTo 的基本用法：限制出現筆數

<!-- 顯示前三筆 -->
{{ list | limitTo: 3 }}
​<li ng-repeat=“item in list | limitTo: 3”></li>





<!-- 顯示倒數三筆，數字前面加負號-->
​{{ list | limitTo:-3 }}
<li ng-repeat=“item in list | limitTo: -3”></li>

limitTo 也可以用在字串上面

<!-- 顯示 '新生活' -->
​{{ '新生活運動開跑' | limitTo:3 }}

orderBy 的基本用法：排序方面

<!-- 由價錢的低到高排序 -->
<li ng-repeat=“item in Ctrl.list | orderBy:'price’”></li>






<!-- 由價錢的高到低排序 ，argument 前面加負號-->
<li ng-repeat=“item in Ctrl.list | orderBy:’-price’”></li>

‘price’ 前面加 - 是 reverse order 的意思，限定 argument 是字串寫法 （string comparator）

要 reverse order 也可以使用第二個 argument

<!-- reverse order set true -->
<li ng-repeat=“item in Ctrl.list | orderBy:'price':true” ></li>

也可複數篩選

<!-- 顯示最貴的前三筆 -->
​<li ng-repeat=“item in Ctrl.list | orderBy:’-price’ | limitTo:5 ”></li>

本篇完整 pinkr 範例
http://plnkr.co/edit/NcPVUq0rwgLpKUV5EH1X?p=preview

官網有更多範例
https://docs.angularjs.org/api/ng/filter

**註一

看 angular-locale_zh-tw.js 的原始法，會發現檔案只是改掉原本 AngularJS library 設定的 format。
(快打開來看，原始碼http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/i18n/angular-locale_zh-tw.js)

假如有需要大量修改 filter format 的朋友，可以參考檔案寫法，依樣畫葫蘆的客製化 format 檔案。

注意：
因為檔案裡是把整個 locale provider 都替換。
要改就一定要把全部的樣式按照 angular-locale_zh-tw.js 的範例，把每個對照 key 都有值。
因為一旦少了某個 format key, angularJS 會在 format 的過程中拋 exception 的。