zoukankan      html  css  js  c++  java
  • 使用AngularJS中的filterFilter函数进行过滤

    AngularJS中有一个filterFilter函数用来对集合过滤,非常方便。

    源代码大致如下:

    function filterFilter(){
        return function(aray, expression comparator){
            if(!isArray(array)) return array;
            
            var comparatorType = typeof(comparator),
                predicates = [],
                evaluatedObjects = [];
            
            predicates.check = function(value){
                for(var j = 0; j < predicates.length; jii){
                    if(!predicates[j](value){
                        return false;
                    })
                }
                return true;
            }
            
            if(comparatorType != 'function'{
                if(comparatorType === 'boolean' && comparator){
                    comparator = function(obj, text){
                        return angular.equals(obj, text);
                    }
                } else {
                    comparator = function(obj, text){
                        ...
                    }
                }
            }) 
        }
    }

    controller部分如下:

    angular
      .module('app')
      .controller('MainCtrl', ['$scope',
        function($scope) {
        $scope.users = $scope.users = [
            {name: '', email: '', joined: 2015-1-1}
        ];
    
        $scope.filter = {
          fuzzy: '',
          name: ''
        };
    
        ...
    
      }]);

    ■ 搜索所有任意字段

    <input type="text" ng-model="filter.any" >
    
    <tr ng-repeat="user in users | filter: filter.any">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.joined | date}}</td>
    </tr>


    ■ 搜索某个字段

    <input type="text" ng-model="filter.name">
    
    <tr ng-repeat="user in users 
        | filter: filter.any
        | filter: {name: filter.name}">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.joined | date}}</td>
    </tr>

    如果想name字段完全匹配:

    <tr ng-repeat="user in users 
        | filter: filter.any
        | filter: {name: filter.name}:true">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.joined | date}}</td>
    </tr>


    ■ 搜索时间段

    contrlller部分修改为:

    angular
      .module('app')
      .controller('MainCtrl', ['$scope',
        function($scope) {
        $scope.users = $scope.users = [
            {name: '', email: '', joined: 2015-1-1}
        ];
    
        $scope.filter = {
          fuzzy: '',
          name: ''
        };
    
        $scope.minDate = new Date('January 1, 2000');
        $scope.maxDate = new Date();
    
        $scope.min = function(actual, expected) {
          return actual >= expected;
        };
    
        $scope.max = function(actual, expected) {
          return actual <= expected;
        };
    
      }]);

    页面部分为:

    <input type="text" ng-model="fromDate" data-min-date="{{minDate}}">
    <input type="text" ng-model="untilDate" data-max-date="{{maxDate}}">
    
    <tr ng-repeat="user in users 
        | filter: filter.any
        | filter: {name: filter.name}
        | filter: {joined: untilDate}:max
        | filter: {joined: beforeDate}:min">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.joined | date}}</td>
    </tr>
  • 相关阅读:
    MyBatis学习笔记
    通过Executor来启动线程比用Thread的start()更好
    步骤2:JMeter 分布式测试(性能测试大并发、远程启动解决方案)
    步骤1:JMeter 录制脚本接口测试
    adb常用命令(手机测试)
    电商购物核心功能测试点
    APP测试基本流程以及APP测试要点
    Jmeter-jtl性能测试报告转换-2种导出方法
    Linux之find查找命令
    linux之top命令详解
  • 原文地址:https://www.cnblogs.com/darrenji/p/5183019.html
Copyright © 2011-2022 走看看