Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi có một $scope.userscái mà tôi sử dụng để hiển thị một bảng và tôi cần áp dụng một bộ lọc với nhiều tùy chọn,

Đây là $scope.usersđối tượng:

[
  {
    "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"    
  }
]

Trong bộ lọc, tôi chuyển đối tượng khác từ $scopeđể lọc dữ liệu, trong trường hợp này là $scope.searchParamstrước đây tôi đã tính toán trong một chỉ thị.

$scope.searchParams:

[
  {'name':'Cosme'},
  {'login':'andres.un1@mail.com'},
  {'status':'ENABLED'},
  {'status':'DISABLED'},
  {'account':'267123'},
  {'account':'543987'},
  {'account':'544111'},
  {'account':'543987'}
]

Như bạn có thể thấy, nameloginlà duy nhất trong bộ lọc, nhưng statusaccountcó thể có nhiều giá trị để áp dụng trong bộ lọc. Đây là cách tiếp cận của tôi để làm điều đó nhưng tôi nghĩ là rất không hiệu quả, cũng không hoàn chỉnh vì không có chức năng nhiều bộ lọc:

var secUser = function () {

  return function (input, list) {

    var out = [];

    var nameArr = [],
      loginArr = [],
      statusArr = [],
      profileArr = [],
      accountsArr = [];

    angular.forEach(list, function(filter){
      console.log(filter);
      if(filter.hasOwnProperty('name')){
        nameArr.push(filter.name);
      }
      if(filter.hasOwnProperty('login')){
        loginArr.push(filter.login);
      }
      if(filter.hasOwnProperty('status')){
        statusArr.push(filter.status);
      }
      if(filter.hasOwnProperty('account')){
        accountsArr.push(filter.account);
      }
      if(filter.hasOwnProperty('profile')){
        profileArr.push(filter.profile);
      }
    });

    angular.forEach(input, function(user){

      // no filters applied
      if(nameArr.length < 1 && loginArr.length < 1 &&
        statusArr.length < 1 && accountsArr.length < 1 &&
        profileArr.length < 1){
        out.push(user);
      }
      // filters to be applied
      else{
        if(nameArr.indexOf(user.name) > -1){
          out.push(user);
        }
        if(loginArr.indexOf(user.login) > -1){
          out.push(user);
        }
        if(statusArr.indexOf(user.merchant.status) > -1){
          out.push(user);
        }
      }

    });

    return out;
  };
};
//-- register filter
app.filter('secUser', secUser);

Cuối cùng, đây là cách tôi đang sử dụng fiter: <tbody ng-repeat="user in users | secUser:searchParams " class="table-striped">

¿Có cách nào tốt hơn để triển khai bộ lọc này vì trong tương lai có thể có nhiều trường bộ lọc hơn không? Ngoài ra, tôi nghĩ là rất kết hợp với quan điểm.

4 hữu ích 0 bình luận 1.0k xem chia sẻ
1

Có nhiều cách bạn có thể làm điều này nhưng một yêu cầu là bạn cần phải làm cho searchParamscấu trúc của mình chung chung hơn. Ví dụ: ở đây tôi đang sử dụng một đối tượng trong đó mỗi khóa là đường dẫn đến đối tượng đích và giá trị tương ứng là một mảng có tất cả các giá trị bạn muốn so khớp với:

$scope.searchParams = {
  'name': ['Cosme'],
  'login': ['andres.un1@mail.com'],
  'merchant.status' : ['ENABLED','DISABLED'],
  'merchant.accounts' : ['267123','543987 ','544111','543987'],
}

Sau đó, bạn có thể cập nhật bộ lọc của mình để xử lý dữ liệu chung. Nó không thể hoàn toàn chung chung bởi vì nó phụ thuộc vào logic kinh doanh của bạn, ví dụ: accountskhớp với khóa 500092hoặc giá trị CONSULT. Dưới đây là một chức năng bộ lọc được cập nhật xử lý ba loại mục tiêu trong dữ liệu của bạn:

  • giá trị nguyên thủy khớp với giá trị, ví dụ: name
  • mảng khớp với bất kỳ nội dung nào, ví dụ: status
  • các đối tượng phù hợp với bất kỳ khóa nào, ví dụ: accounts

JsFiddle (với dữ liệu được sửa đổi một chút để thử nghiệm)

var secUser = function () {
  return function (users, filters) {

    return users.filter(function(user){
      var match = false;

      angular.forEach(filters, function(filterValues, keyPath){
        if (match) return; // if we already found a match, don't continue searching

        // get the target based on the contents of the keypath
        var target = keyPath.split('.').reduce(function(object, key) {
          // get the next part of the path, if exists
          return object && object[key];
        }, user); // initial value is the user object

        if (target !== undefined){ // if the target exists for this item
          var values = []; // stores the values from the item to search against

          if(typeof target === "object") {
            values = Object.keys(target);            
          }
          else if (target.isArray) {
            values = target;
          } else {
            values = [target];
          }

          // check if any entry in values matches any entry of the filter values
          match = values.some(function (v) {
            return filterValues.indexOf(v) >= 0;
          });
        }
      });

      return match;
    });
  };
};
1 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript angularjs filter , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading