码迷,mamicode.com
首页 > 其他好文 > 详细

filter,orderBy等过滤器

时间:2015-05-27 19:04:34      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

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

 

filter,orderBy等过滤器

标签:

原文地址:http://www.cnblogs.com/Denny_Yang/p/4534099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!