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;

    };

});