AngularJS範例說明7-Filter

註：紅字為執行結果

• 內建 filters
• Currency：現金格式
• {{ 123 | currency }} $123.00
• Filter：找出符合條件者(元素、字元)
• {{ ['Ari','Lerner','Likes’] | filter:'e' }} ["Lerner","Likes”]
• {{ [{'name': 'Ari‘,'City': 'San Francisco‘,'favorite food': 'Pizza’},{'name': 'Nate‘,'City': 'San Francisco‘,'favorite food': 'indian food’}] | filter:{'favorite food': 'Pizza'} }} [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}]
• LimitTo：取字元(從前面取或從後面取)
• {{ San Francisco is cloudy | limitTo:3 }} San
• {{ San Francisco is cloudy | limitTo:-6 }} cloudy
• Lowercase：轉小寫
• {{ "San Francisco is cloudy" | lowercase }} san francisco is very cloudy
• Uppercase：轉大寫
• {{ "San Francisco is cloudy" | uppercase }} SAN FRANCISCO IS VERY CLOUDY
• Orderby：排序(有加true時是反向排序)
• {{ [{'name': 'Ari','status': 'awake'},{'name': 'Q','status': 'sleeping'},{'name': 'Nate','status': 'awake’}] | orderBy:'name' }}[{"name":"Ari","status":"awake"},{"name":"Nate","status":"awake"},{"name":"Q","status":"sleeping"}]
• {{ [{'name': 'Ari','status': 'awake'},{'name': 'Q','status': 'sleeping'},{'name': 'Nate','status': 'awake’}] | orderBy:'name':true }}[{"name":"Q","status":"sleeping"}, {"name":"Nate","status":"awake"},{"name":"Ari","status":"awake"}]
• Number：數字格式(逗號分隔、小數位數)
• {{ 123456789 | number }} 1,234,567,890
• {{ 1.234567 | number:2 }} 1.23
• Json：轉成字串
• {{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }} { "name": "Ari", "City": "SanFrancisco" }
• Date：日期格式轉換
• 日期格式filter
• 自定義 filters
• 實作將第一個字母轉為大寫
angular.module('myApp.filters', [])
.filter('capitalize', function() {
   return function(input) {
   // input是我輸入的字符串
   if (input)
      return input[0].toUpperCase() + input.slice(1);
   }
});
• 如何調用
{{ 'ginger loves dog treats' | lowercase | capitalize }}
• 回傳結果
Ginger loves dog treats