フィルター
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の使い方は簡単です
------------------------------------------------------------
コントローラ、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;
};
});