zoukankan      html  css  js  c++  java
  • 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;
        };
    });
  • 相关阅读:
    转载:Cgroups 与 Systemd
    转载:linux cgroups 简介
    深入剖析Linux IO原理
    Tomcat zabbix监控、jmx监控、zabbix_java_gateway
    Tomcat 打开jmx
    vsftp、ftps 搭建
    Tomcat 调优
    Tomcat 部署及配置
    SVN 搭建
    Nginx 编译安装
  • 原文地址:https://www.cnblogs.com/Denny_Yang/p/4534099.html
Copyright © 2011-2022 走看看