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; }; });