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筛选器通过其他选择标签选择

回答

相关问题