Question

我有这个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.

感谢每一点！

Answer 1

您可以在html中使用过滤器，如下所示

{{1}}

见这里 https://plnkr.co/edit/0uwRZBnCEYLrxm4maUkX?p=preview

Answer 2

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

＆＃13;

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');



})

＆＃13;

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

＆＃13;

AngularJS过滤一个其他选择标签

2 个答案: