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>
  • 相关阅读:
    计算机网络概述
    虚拟机网卡配置
    元类
    反射和内置方法
    面向对象的三大特性
    MYSQL中EXISTS的用法
    Guava中的常见集合操作用法
    集合操作交并补的三种Java实现
    P9 get和resize操作(Java 13)
    P8 Java 13中 HashMap的 put方法
  • 原文地址:https://www.cnblogs.com/darrenji/p/5183019.html
Copyright © 2011-2022 走看看