AngularJS对先前过滤的数据应用过滤器

时间:2016-10-04 15:09:10

标签: javascript angularjs filter

我有$scope.users用于显示表格,我需要应用具有多个选项的过滤器,

这是$scope.users对象:

[
  {
    "login": "andres.un1@mail.com",
    "merchant": {
      "merchantId": 500095,
      "status": "ENABLED",
      "defaultAccountId": null,
      "accounts": {
        "500092": "ADMIN",
        "500178": "CONSULT",
        "500180": "ADMIN",
        "500182": "ADMIN",
        "500201": "ADMIN"
      }
    },    
    "name": "Carlos"    
  },
  {
    "login": "andres.un2@mail.com",
    "merchant": {
      "merchantId": 500095,
      "status": "DISABLED",
      "defaultAccountId": null,
      "accounts": {
        "500092": "CONSULT",
        "500178": "MANAGER",
        "500180": "ADMIN",
        "500182": "ADMIN",
        "500201": "ADMIN"
      }
    },
    "name": "Carlos Andres"
  },
  {
    "login": "cosme.fulanito@mail.com",
    "merchant": {
      "merchantId": 500095,
      "status": "DISABLED",
      "defaultAccountId": null,
      "accounts": {
        "500092": "CONSULT",
        "500178": "MANAGER",
        "500180": "ADMIN",
        "500182": "ADMIN",
        "500201": "ADMIN"
      }
    },
    "name": "Cosme"    
  }
]

在过滤器中,我从$scope传递其他对象来过滤数据,在这种情况下是$scope.searchParams,我之前在指令中计算过。

$scope.searchParams

{
  "name": [
    "arl"
  ],
  "login": [
    "@"
  ],
  "merchant.status": [
    "ENABLED"
  ],
  "merchant.accounts": [
    "501678",
    "501675",
    "MANAGER",
    "ADMIN"
  ]
}

如您所见,namelogin在过滤器中是唯一的,但statusaccount可以在过滤器中应用多个值。这是我的方法,但我认为这是非常无效的,重要的是每个过滤器应用于先前由另一个过滤器过滤的数据:

var usrUser = function () {

  var SEPARATOR = '.';

  return function (users, filters) {

    // when the filter is not defined shows all results
    if(filters === undefined || angular.equals({}, filters)){
      return users;
    }

    var matchName = function (element){
      if(element['name'].indexOf(filters['name']) >= 0){
        return element;
      }
    };

    var matchLogin = function (element){
      if(element['login'].indexOf(filters['login']) >= 0){
        return element;
      }
    };

    var matchState = function (element){
      if(filters['merchant.status'].indexOf(element['merchant']['status']) >= 0){
        return element;
      }
    };

    var matchAccount = function (element){
      var match = false;
      angular.forEach(element['merchant']['accounts'], function(profile, accountId){
        if(filters['merchant.accounts'].indexOf(accountId) >= 0 ||
          filters['merchant.accounts'].indexOf(profile) >= 0){
          match = true;
          return;
        }
      });
      if(match){
        return element;
      }
    };

    if(filters['name'] !== undefined){
      users = users.filter(matchName);
    }

    if(filters['login'] !== undefined){
      users = users.filter(matchLogin);
    }

    if(filters['merchant.status'] !== undefined){
      users = users.filter(matchState);
    }

    if(filters['merchant.accounts'] !== undefined){
      users = users.filter(matchAccount);
    }

    return users;
  };
};
//-- register filter
angular.module('users').filter('usrUser', usrUser);

最后,我是如何使用fiter:<tbody ng-repeat="user in users | secUser:searchParams " class="table-striped">

考虑到将来可能会有更多的过滤器字段,是否有更好的方法来实现此过滤器?我认为这与观点非常吻合。

0 个答案:

没有答案