filter,orderBy等過濾器

filter用法比較靈活（也增加了較高的復雜度），單獨列出。

基本的用法：

<input type="text" class="search" ng-model="keyword" />

ng-repeat="item in items | filter:{name:keyword,done:false}" // 默認是and連接多個屬性

ng-repeat="item in items | filter:{$:keyword,done:false}" // 表示只計入未完成的，$表示：or

 

$scope.doneSelect=function(item){ // 這個item是每一項而不是整個源數據(items)

   return item.done && item.estimation>20;  // 返回true表示保留(而不是返回一個新數據源)

}

ng-repeat="item in items | filter:doneSelect"

統計技巧：

ng-repeat="item in filteredBacklog={backlog|filter:{$:criteria,done:false}}"

Total:{{filteredBacklog.length}}

書中建議這類代碼應該放在控制器中（控制器中可以訪問$filter），這樣更容易實現單元測試。

-----------------------------------------------------------------------------------

orderBy的用法比較簡單

<thead>
    <th ng-click="sort('name')">Name</th>
    <th ng-click="sort('desc')">Description</th>
</thead>
<tbody>
    <!--sortFiled: string 是排序的屬性名-->
    <!--reverse: boolean true升序,false降序-->
　　<!--排序放在filter之后，是有原因的。相比過濾，排序要付出更大的代價-->

    <tr ng-repeat="item in filteredBacklog = (backlog | filter:criteria | orderBy:sortFiled:reverse)">
        <td>{{item.name}}</td>
        <td>{{item.desc}}</td>
        ...
    </tr>
</tbody>

$scope.sortField = undefined;
$scope.reverse = false;

$scope.sort = function(filedName) {
    if ($scope.sortField === filedName) {
        $scope.reverse = !$scope.reverse;
    } else {
        $scope.sortField = filedName;
        $scope.reverse = false;
    }
}

------------------------------------------------------------

從controller、filter（控制器、服務、其他過濾器）等中訪問過濾器

// 第一種寫法
angular.module('trimFilter', [])

.filter('trim', function($filter) {

    var limitToFilter = $filter('limitTo');

    return function(input, limit) {
        if (input.length > limit) {
            return limitToFilter(input, limit - 3) + '...';
        }
        return input;
    };
});
// 更好的寫法（更易讀、代碼更少）
.filter('trimII', function(limitToFilter) {

    return function(input, limit) {
        if (input.length > limit) {
            return limitToFilter(input, limit - 3) + '...'
        }
        return input;
    };
});