フィルター

6080 ワード

filterの使い方は比較的柔軟で(複雑さも増す)、単独でリストされます.
基本的な使い方:

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;

    }

}

------------------------------------------------------------
コントローラ、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;

    };

});