AngularJS通过其他选择标签过滤一个选择答案

【问题标题】：AngularJS filter one select by other select tagsAngularJS通过其他选择标签过滤一个选择
【发布时间】：2018-03-18 07:14:37
【问题描述】：

我有这个 JSON 模型。我必须显示唯一值，但这个问题我已经解决了。

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.

感谢每一点！

【问题讨论】：

标签： javascript angularjs filter html-select ng-options

【解决方案1】：

您可以在 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="angular.js@1.5.x" 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

【讨论】：

我选择 formatList: 'WATCHLIST' 所以我希望 listName 有 2 个列表： "listName": "10-AU-COUNTRIES (Watchlist)" 和 "listName": "10-AU-COUNTRIES （观察名单 2）”，但这只是其中之一。所以我想这是行不通的。无论我也会以这种方式进行调查。谢谢！

【解决方案2】：

这可能会对您有所帮助。根据场景编写自己的风格。

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>

【讨论】：

这样我必须为每个选择添加 3 个过滤器，这是行不通的。它只需要第一个过滤器！
是的，这是正确的方法，但客户不希望这样。我将尝试在控制器中创建一个功能并在 make 中更改选择后触发。谢谢！