filter是什麼？

angular的filter，可以幫資料做過濾。

善用內建filter或自定filter，針對資料進一步篩選，呈現我們想要的資料。

當專案中，需要做相同的過濾功能時，我們也可以自訂filter並共用filter，可以節省我們的開發時間。

範例：
http://jsbin.com/uPETequ/2/edit
先來介紹angular內建的filter有哪些？

currency 加入貨幣符號
date 可以將 Date 物件轉成指定格式的日期字串
filter 可以篩選陣列中的內容
json 可以將javascriop物件轉成json字串
limitTo 可以限制陣列或字串裡面的字元個數
number 可以為數值或指定小數以下位數
lowercase 可以將英文字串轉成英文小寫
uppercase 可以將英文字串轉成英文大寫
orderBy 可以將資料作排序

filter怎麼用？

基本用法：

{{ expression | filter }}

currency 加入貨幣符號

預設貨幣格式 ($): {{money | currency}}<br>
自訂貨幣格式 (USD$): {{money | currency:"USD$"}}<br>

date 可以將 Date 物件轉成指定格式的日期字串

{{ birth | date }}
{{ birth | date:'yyyy 年 MM 月 dd 日' }}
{{1288323623006 | date:'medium'}}<br>

json 可以將javascriop物件轉成json字串

{{ obj | json }}

limitTo 可以限制陣列或字串裡面的字元個數

  Limit {{numbers}} to: <input type="integer" ng-model="numLimit">
  <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
  Limit {{letters}} to: <input type="integer" ng-model="letterLimit">
  <p>Output letters: {{ letters | limitTo:letterLimit }}</p>

number 可以指定小數以下位數
如果輸入的是不是一個數字，返回一個空字串。

{{ num | number }}
{{ num | number:5 }}

lowercase 可以將英文字串轉成英文小寫

{{ lower | lowercase }}

uppercase 可以將英文字串轉成英文大寫

{{ upper | uppercase }}

完整範例：
http://jsbin.com/uPETequ/2/edit

參考資料：

簡單實現filter的範例
http://jsfiddle.net/pkozlowski_opensource/Nk8qy/2/

本次範例參考：
http://abgne.tw/angularjs/angularjs-getting-stared/filters.html

官方文件：
http://docs.angularjs.org/guide/dev_guide.templates.filters

進階範例：
http://jsfiddle.net/colvint/tyx3m/

延伸閱讀文章參考：

[MAN鐵人賽]Day 13:AngularJS - Filter
http://www.dotblogs.com.tw/blackie1019/archive/2013/10/15/124302.aspx

[AngularJS]AngularJS 入門教學 - Filters (二)
http://abgne.tw/angularjs/angularjs-getting-stared/filters-2.html

AngularJS學習初探(4)-內容過濾（filter）和事件綁定
http://dictmoom.f2e.me/2013/07/angularjs-start(4)/

angularjs 過濾器filter
http://www.cnblogs.com/whitewolf/archive/2012/10/31/2748920.html

邊學AngularJS邊做Todo List (3) － Todo List 刪項目
http://ithelp.ithome.com.tw/question/10095481?tag=rt.rq

AngularJS 玩弄手札 巢狀 ngRepeat + filter
http://weisnote.blogspot.tw/2013/06/angularjs-ngrepeat-filter.html

AngularJS 篩選器 filter
http://deathhell1121.blogspot.tw/2013/02/angularjs-filter.html

AngularJS入門教程09：過濾器
http://www.angularjs.cn/A00c

How to use a filter in a controller?
http://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196