AngularJS filtre un sélectionner par d'autres étiquettes de sélection

J'ai ce modèle JSON. Je dois montrer des valeurs uniques, mais ce problème que j'ai déjà résolu.AngularJS filtre un sélectionner par d'autres étiquettes de sélection

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" 
    } 
    ... 
]

Et vu cette option: sélectionnez

<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>

En-il un moyen de faire filtre pour tous les sélectionner en fonction autre sélection valeur sélectionnée ?

I also make this demo.

Merci pour tous les points!

Source

2017-10-06 Carnaru Valentin

Cette volonté peut vous aider. Écrivez votre propre style selon le scénario.

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>

Source

2017-10-06 13:59:22

De cette façon, je dois ajouter 3 filtres pour chaque sélectionner, et ne fonctionne pas. Cela prend juste le premier filtre! –

l'utilisation est désactivée lorsque la condition est multiple. –

Oui, c'est la bonne façon, mais le client ne veut pas comme ça. Je vais essayer de faire une fonction dans le contrôleur et de déclencher après la sélection de changement dans make. Merci! –

Vous pouvez utiliser le filtre dans votre html comme ci-dessous

<!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>

voir ici https://plnkr.co/edit/0uwRZBnCEYLrxm4maUkX?p=preview

Source

2017-10-06 18:58:03

Je choisis formatList: 'WATCHLIST' donc je m'attendais dans listName à avoir 2 listes: "listName": "10-AU-PAYS (Watchlist)" et "listName": "10-AU-PAYS (Watchlist 2)" mais le est juste un. Donc je suppose que ça ne marche pas. Quoi que je puisse inverser de cette façon aussi. Je vous remercie! –

AngularJS filtre un sélectionner par d'autres étiquettes de sélection

Répondre

Questions connexes