使用MultiSelect下拉菜單的角度過濾器複選框

Question

想要基於從多選下拉菜單中選擇的值在moduleName上創建過濾器。

DATA：

[ 
    { 
    "_id": "59155aada593f4331499dd59", 
    "uswin": "lovelje", 
    "moduleName": "After Call Survey", 
    "accessLevel": "Read Only", 
    "reason": "A reason", 
    "status": "PENDING", 
    "date": 1493834611052, 
    "notifierEmail": null, 
    "__v": 0 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d96", 
    "uswin": "lovelje", 
    "moduleName": "Activity ID", 
    "accessLevel": "Admin", 
    "reason": "Dev test", 
    "status": "PENDING", 
    "date": 1493651466675, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d97", 
    "uswin": "lovelje", 
    "moduleName": "Outbound", 
    "accessLevel": "Read Only", 
    "reason": "dd", 
    "status": "PENDING", 
    "date": 1493348356289, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d98", 
    "uswin": "lovelje", 
    "moduleName": "Vocab", 
    "accessLevel": "Business Analyst", 
    "reason": "dd", 
    "status": "APPROVED", 
    "date": 1493347986430, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d99", 
    "uswin": "lovelje", 
    "moduleName": "Vocab", 
    "accessLevel": "Business User", 
    "reason": "test", 
    "status": "PENDING", 
    "date": 1493244413636, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9a", 
    "uswin": "lovelje", 
    "moduleName": "Outbound", 
    "accessLevel": "IT User", 
    "reason": "Test server email", 
    "status": "PENDING", 
    "date": 1492536070949, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9b", 
    "uswin": "lovelje", 
    "moduleName": "ANI Block", 
    "accessLevel": "Read Only", 
    "reason": "Testing local email again, see if it's sending and recieving", 
    "status": "PENDING", 
    "date": 1492456119551, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9c", 
    "uswin": "lovelje", 
    "moduleName": "After Call Survey", 
    "accessLevel": "Admin", 
    "reason": "Raisons", 
    "status": "APPROVED", 
    "date": 1491327537430, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9d", 
    "uswin": "lovelje", 
    "moduleName": "IMT", 
    "accessLevel": "Admin", 
    "reason": "To see access", 
    "status": "APPROVED", 
    "date": 1490970158382, 
    "notifierEmail": null, 
    "$$hashKey": "object:97" 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9e", 
    "uswin": "lovelje", 
    "moduleName": "Outbound", 
    "accessLevel": "Admin", 
    "reason": "Testing my request access", 
    "status": "PENDING", 
    "date": 1490367409921, 
    "notifierEmail": null 
    }, 
    { 
    "_id": "59155ad3d07cc5af655b9d9f", 
    "uswin": "lovelje", 
    "moduleName": "Vocab", 
    "accessLevel": "Admin", 
    "reason": "Because", 
    "status": "APPROVED", 
    "date": 1490216338219, 
    "notifierEmail": null 
    } 
] 

過濾器數據：

[ 
    { 
    "name": "After Call Survey", 
    "show": false 
    }, 
    { 
    "name": "ANI Block", 
    "show": false 
    }, 
    { 
    "name": "IMT", 
    "show": false 
    }, 
    { 
    "name": "Messaging", 
    "show": false 
    }, 
    { 
    "name": "Outbound", 
    "show": false 
    }, 
    { 
    "name": "Vocab", 
    "show": false 
    } 
] 

JS

$scope.moduleFilter=function(entry){ 
     $scope.checkedModules = $filter('filter')($scope.modules, {show: 'true'}) 
$scope.checkedModules=($scope.checkedModules.length===0?$scope.modules:$scope.checkedModules); 

     return $scope.checkedModules; 
      }; 

HTML

<div ng-repeat="request in (filteredItems = ((requests.value) | filter: { 'moduleName': moduleFilter }))" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 no-padding"> 

請提出建議。

Answer 1

謝謝你們。我找到了解決方案。我正在使用自定義過濾器。 byModuleName。

<div ng-repeat="request in (filteredItems = ((requests.value) | byModuleName: modules))" > 

對象數據modules在過濾器具有這樣的結構：

[ 
    { 
    "name": "After Call Survey", 
    "show": false 
    }, 
    { 
    "name": "ANI Block", 
    "show": false 
    }, 
    { 
    "name": "IMT", 
    "show": false 
    }, 
    { 
    "name": "Messaging", 
    "show": false 
    }, 
    { 
    "name": "Outbound", 
    "show": false 
    }, 
    { 
    "name": "Vocab", 
    "show": false 
    } 
] 

過濾：byModuleName

function byModuleName() { 
    return function(requests, modules) { 
    let checked = modules.filter(function filt(x){ 
     return x.show === true; 
    }); 
    checked = (checked.length === 0 ? modules : checked); 

    let filtered = []; 
    requests.filter(function(items) { 
     return checked.filter(function(filter) { 
     if (items.moduleName === filter.name) { 
      filtered.push(items); 
     } 
     }) 
    }); 
    return filtered; 
    }; 
} 

angular.module('vovApp') 
    .filter("byModuleName", byModuleName);