angularjs入門-filter
angularjs提供了很多filter，這個新名詞又是什麼呢?其實也就是對顯示的格式format的意思，在1.3以前，使用filter的效能會比較差，1.3之後改進很多，當然除非不得已，建議格式化輸出樣式，最好還是在後端處理完會比較好，我們可以去官網看看到底官方提供了哪些filter，https://docs.angularjs.org/api，首先來看看number，如下例子
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
{{2000000.12345 | number}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
});
</script>
</body>
</html>
如果我們只要顯示小數點兩位，只要改成number:2，可以自行試試看
接著我們來看看currency，其實就是會在數字前加入$
{{2000000.12345 | currency}}
</div>如果我們加入了各國語系的js檔，則會自動加上各國的幣別代號，比如台灣的NT，如下所示我多加入了台灣語系的js檔
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
{{2000000.12345 | currency}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="Scripts/i18n/angular-locale_zh-tw.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
});
</script>
</body>
</html>或者自訂幣別格式，我想要顯示台幣兩字
{{2000000.12345 | currency:'台幣$'}}
</div>lowercase顧名思義就是把大寫字母轉成小寫，uppercase則是把小寫變成大寫，如下
{{'KINANSON' | lowercase}}
<hr />
{{'jacky is a man' | uppercase}}
</div>date就是日期的格式化，如下所示
<div ng-controller="FirstCtrl">
{{IsDate | date}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.IsDate = Date.now();
});
</script>
</body>我們也可以自訂格式，date有非常多的格式化，想了解更多的話，可參考官網，https://docs.angularjs.org/api/ng/filter/date
{{IsDate | date:'yyyy-MM-dd'}}
</div>再來就是談談filter了，其實在ng-repeat的時候，就有先用過這個了，為此我們再把之前的範例拿出來看一下。
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="msg" />
<div ng-repeat="item in people | filter:msg">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', sex: 'boy' },
{ name: 'andy', sex: 'boy' },
{ name: 'coco', sex: 'girl' },
{ name: 'lucky', sex: 'dog' },
{ name: 'micky', sex: 'mouse' },
];
});
</script>
</body>之前也有提過，如果我們想針對特別欄位搜尋，我們可以改成如下
<input type="text" ng-model="msg.name" />
<div ng-repeat="item in people | filter:msg">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>再來談談limitTo，其實也就是要顯示多少筆的意思
<div ng-repeat="item in people | limitTo:3">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>然後是orderBy，如下
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>要反排序的話，只要加上-，如下
<div ng-repeat="item in people | orderBy:'-sex'">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>我們可以同時使用多個filter，比如我要只顯示三筆，又要排序，如下
<div ng-repeat="item in people | orderBy:'-sex' | limitTo:'3'">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>
如果要在js檔裡面寫filter的話也可以，如下例子
<div ng-controller="FirstCtrl">
<div ng-repeat="item in people">
<span class="form-control change-color-{{$first}}">第{{$index}}號:我叫{{item.name}}-我是{{item.sex}}</span>
</div>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope,$filter) {
$scope.people = [
{ name: 'anson', sex: 'boy' },
{ name: 'andy', sex: 'boy' },
{ name: 'coco', sex: 'girl' },
{ name: 'lucky', sex: 'dog' },
{ name: 'micky', sex: 'mouse' },
];
$scope.people = $filter('limitTo')($scope.people,3);
});
</script>
</body>有些時候在js檔裡面寫filter其實是很有必要性的，比如像我們在使用一些第三方的日期，雖然在畫面上看起來正常，但是在js檔要寫回資料庫的時候，格式可能不如預期，我們就非常需要在後端格式化，然後在送回db。
以上再請多多指教
