AngularJS篩選器通過其他選擇標籤選擇

我有這個JSON模型。我必須表現出獨特的價值觀，但是我已經解決了這個問題。AngularJS篩選器通過其他選擇標籤選擇

vm.listsData = [ 
    { 
     "id": null, 
     "list": { 
     "listId": 100, 
     "listName": "10-AU-COUNTRIES", 
     "filterId": null, 
     "filterName": null 
     }, 
     "fileFormat": "FIRCOSOFT", 
     "exportMode": "FULL", 
     "fileExtension": "fircosoft" 
    }, 
    { 
     "id": null, 
     "list": { 
     "listId": 101, 
     "listName": "10-AU-COUNTRIES (Watchlist)", 
     "filterId": 20, 
     "filterName": "Filter 1" 
     }, 
     "fileFormat": "WATCHLIST", 
     "exportMode": "FULL", 
     "fileExtension": "zip" 
    } 
    ... 
]

，並鑑於此選擇的選項：

<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="vm.formatList" 
     ng-options="item as item.fileFormat for item in vm.listsFormat"> 
    </select> 
</div> 

<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="vm.exportMode" 
     ng-options="item as item.exportMode for item in vm.listsExportMode"></select> 
</div> 

<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="vm.listName" 
     ng-options="item.list.listId as item.list.listName for item in vm.listsName"></select> 
</div> 
<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="vm.fileExtension" 
     ng-options="item as item.fileExtension for item in vm.listsFileExtension"></select> 
</div>

在有沒有辦法讓每一個過濾器中選擇基於其他選擇選定值？

I also make this demo.

感謝每一點！

來源

2017-10-06 Carnaru Valentin

這可能對你有幫助。根據情景編寫自己的風格。

angular.module("firstApp", []) 
 
.controller('MainCtrl', function($scope){ 
 
    
 
    var vm = this; 
 

 
    vm.listsData = [ 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 100, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "FIRCOSOFT", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "fircosoft" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 101, 
 
      "listName": "10-AU-COUNTRIES (Watchlist)", 
 
      "filterId": 20, 
 
      "filterName": "Filter 1" 
 
      }, 
 
      "fileFormat": "WATCHLIST", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "zip" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 102, 
 
      "listName": "10-AU-COUNTRIES (Watchlist 2)", 
 
      "filterId": 21, 
 
      "filterName": "Filter 2" 
 
      }, 
 
      "fileFormat": "WATCHLIST", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "csv" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 103, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "REGLISS", 
 
      "exportMode": "ADD_MOD", 
 
      "fileExtension": "csv" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 104, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "SAFEWATCH", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "txt" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 105, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "SAFEWATCH", 
 
      "exportMode": "ADD_MOD", 
 
      "fileExtension": "txt" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 105, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "txt" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 106, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "csv" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 107, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "ADD_MOD", 
 
      "fileExtension": "txt" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": 108, 
 
      "listName": "10-AU-COUNTRIES", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "ADD_MOD", 
 
      "fileExtension": "csv" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": null, 
 
      "listName": "Global plus OFAC", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "REGLISS", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "csv" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": null, 
 
      "listName": "Global plus OFAC", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "txt" 
 
     }, 
 
     { 
 
      "id": null, 
 
      "list": { 
 
      "listId": null, 
 
      "listName": "Global plus OFAC", 
 
      "filterId": null, 
 
      "filterName": null 
 
      }, 
 
      "fileFormat": "VIGILANCE", 
 
      "exportMode": "FULL", 
 
      "fileExtension": "csv" 
 
     } 
 
     ]; 
 
     // Remove duplicated values 
 
    function uniqueByKey(arr, key, optionalNestedObj) { 
 
     var values = {}; 
 
     return arr.filter(function(item){ 
 
      var val 
 
      if(typeof item[key] === "string") { 
 
       val = item[key]; 
 
      } 
 
      else { 
 
       val = item[key][optionalNestedObj] //listName in this case 
 
      } 
 
      
 
      var exists = values[val]; 
 
      values[val] = true; 
 
      return !exists; 
 
     }); 
 
    } 
 

 
    // Filter 
 
    vm.filterTest = function() { 
 
     return function(item) { 
 
      console.log("vm.exportMode: ", vm.exportMode); 
 
      console.log("item.exportMode: ", item.exportMode); 
 
      if(item.exportMode == vm.exportMode['fileFormat']) { 
 
       return true; 
 
      } 
 
      console.log("Item: ", item) 
 
      return false; 
 
      
 
     } 
 
    } 
 

 

 

 
    
 

 

 
    vm.listsFormat = uniqueByKey(vm.listsData, 'fileFormat'); 
 
    vm.listsExportMode = uniqueByKey(vm.listsData, 'exportMode'); 
 

 
    vm.listsName = uniqueByKey(vm.listsData, 'list', 'listName'); 
 

 
    vm.listsFileExtension = uniqueByKey(vm.listsData, 'fileExtension'); 
 

 

 

 
})

<!DOCTYPE html> 
 
<html ng-app="firstApp"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    <body ng-controller="MainCtrl as vm"> 
 

 
    <div class="container"> 
 

 
     <div class="col-md-3"> 
 
      {{vm.formatList | json}} 
 
      <select 
 
       class="form-control" 
 
       ng-model="vm.formatList" 
 
       ng-options="item as item.fileFormat for item in vm.listsFormat"> 
 
      </select> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      {{vm.exportMode | json}} 
 
      <select 
 
       class="form-control" 
 
       ng-model="vm.exportMode" 
 
       ng-options="item as item.exportMode for item in vm.listsExportMode | filter:vm.formatList"></select> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      {{vm.listName | json}} 
 
      <select 
 
       class="form-control" 
 
       ng-model="vm.listName" 
 
       ng-options="item.list.listId as item.list.listName for item in vm.listsName | filter:vm.exportMode"></select> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      {{vm.fileExtension | json}} 
 
      <select 
 
       class="form-control" 
 
       ng-model="vm.fileExtension" 
 
       ng-options="item as item.fileExtension for item in vm.listsFileExtension | filter:vm.listName"></select> 
 
     </div> 
 

 
    </div> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 
 

 
    <script src="./node_modules/angular/angular.min.js"></script> 
 
    <script src="./js/firstApp.module.js"></script> 
 
    <script src="./js/main.controller.js"></script> 
 
</body> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
    
 
</body> 
 
</html>

來源

2017-10-06 13:59:22

這樣，我必須添加3個濾波器的每一個選擇，並不是工作。它只需要第一個過濾器！ –

使用禁用時，多個條件.. –

是的，這是正確的方式，但客戶不希望這樣。我將嘗試在make中更改選擇後在控制器中創建一個函數並觸發。謝謝！ –

您可以在HTML中使用過濾器像下面

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <div class="col-md-3"> 
      {{formatList | json}} 
      <select 
     class="form-control" 
     ng-model="formatList" 
     ng-options="item as item.fileFormat for item in (listsFormat | filter:exportMode|filter:listName|filter:fileExtension) track by item.fileFormat"> 
    </select> 
     </div> 
     <div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="exportMode" 
     ng-options="item as item.exportMode for item in (listsExportMode| filter:formatList|filter:listName|filter:fileExtension) track by item.exportMode"></select> 
</div> 
<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="listName" 
     ng-options="item.list.listId as item.list.listName for item in (listsName| filter:formatList|filter:listName|filter:fileExtension) track by item.list.listName"></select> 
</div> 
<div class="col-md-3"> 
    <select 
     class="form-control" 
     ng-model="fileExtension" 
     ng-options="item as item.fileExtension for item in (listsFileExtension| filter:formatList|filter:listName|filter:fileExtension) track by item.fileExtension"></select> 
</div> 
    </body> 

</html>

看到這裏 https://plnkr.co/edit/0uwRZBnCEYLrxm4maUkX?p=preview

來源

2017-10-06 18:58:03

我選擇了formatList：'WATCHLIST'，所以我期望進入listName有2個列表：「listName」：「10-AU-COUNTRIES（Watchlist）」和「listName」：「10-AU-COUNTRIES（Watchlist 2）」，但只是一個。所以我猜這是行不通的。無論我如何反駁這種方式。謝謝！ –

AngularJS篩選器通過其他選擇標籤選擇

回答

相關問題