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>
  • 相关阅读:
    SpringBoot集成MyBatisPlus
    Android 图片混排富文本编辑器控件
    Android 图片压缩器
    python中yield用法
    ubuntu下tesseract 4.0安装及参数使用
    Linux 命令行命令及参数辨异
    一题多解 —— linux 日志文件(log)reload 重新载入
    python中list用法及遍历删除元素
    计算机科学 —— 时间戳(timestamp)
    ubuntu中使用apt-get安装zbar
  • 原文地址:https://www.cnblogs.com/darrenji/p/5183019.html
Copyright © 2011-2022 走看看