Javascript AngularJS按其他选择标记筛选一个选择_Javascript_Angularjs_Filter_Html Select_Ng Options

Javascript AngularJS按其他选择标记筛选一个选择

javascript angularjs filter

Javascript AngularJS按其他选择标记筛选一个选择,javascript,angularjs,filter,html-select,ng-options,Javascript,Angularjs,Filter,Html Select,Ng Options,我有这个JSON模型。我必须展示独特的价值观，但这个问题我已经解决了 vm.listsData = [ { "id": null, "list": { "listId": 100, "listName": "10-AU-COUNTRIES", "filterId": null, "filterName": null }, "fileFormat": "FIRCOSOFT",

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

有没有办法根据其他选择值对每个选择进行筛选

谢谢你的每一点

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

angular.module（“firstApp”，[]）
.controller（'MainCtrl'，函数（$scope）{
var vm=这个；
vm.listsData=[
{
“id”：空，
“名单”：{
“listId”：100，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“FIRCOSOFT”，
“exportMode”：“完整”，
“文件扩展名”：“fircosoft”
},
{
“id”：空，
“名单”：{
“listId”：101，
“名单名称”：“10个非盟国家（观察名单）”，
“filterId”：20，
“过滤器名称”：“过滤器1”
},
“文件格式”：“监视列表”，
“exportMode”：“完整”，
“文件扩展名”：“zip”
},
{
“id”：空，
“名单”：{
“listId”：102，
“名单名称”：“10个非盟国家（观察名单2）”，
“过滤器ID”：21，
“过滤器名称”：“过滤器2”
},
“文件格式”：“监视列表”，
“exportMode”：“完整”，
“文件扩展名”：“csv”
},
{
“id”：空，
“名单”：{
“listId”：103，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“REGLISS”，
“导出模式”：“添加模块”，
“文件扩展名”：“csv”
},
{
“id”：空，
“名单”：{
“listId”：104，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“安全观察”，
“exportMode”：“完整”，
“文件扩展名”：“txt”
},
{
“id”：空，
“名单”：{
“listId”：105，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“安全观察”，
“导出模式”：“添加模块”，
“文件扩展名”：“txt”
},
{
“id”：空，
“名单”：{
“listId”：105，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“exportMode”：“完整”，
“文件扩展名”：“txt”
},
{
“id”：空，
“名单”：{
“listId”：106，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“exportMode”：“完整”，
“文件扩展名”：“csv”
},
{
“id”：空，
“名单”：{
“listId”：107，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“导出模式”：“添加模块”，
“文件扩展名”：“txt”
},
{
“id”：空，
“名单”：{
“listId”：108，
“名单名称”：“10个非盟国家”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“导出模式”：“添加模块”，
“文件扩展名”：“csv”
},
{
“id”：空，
“名单”：{
“listId”：空，
“名单名称”：“全球加OFAC”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“REGLISS”，
“exportMode”：“完整”，
“文件扩展名”：“csv”
},
{
“id”：空，
“名单”：{
“listId”：空，
“名单名称”：“全球加OFAC”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“exportMode”：“完整”，
“文件扩展名”：“txt”
},
{
“id”：空，
“名单”：{
“listId”：空，
“名单名称”：“全球加OFAC”，
“filterId”：空，
“filterName”：空
},
“文件格式”：“警惕”，
“exportMode”：“完整”，
“文件扩展名”：“csv”
}
];
//删除重复的值
功能uniqueByKey（arr、key、OptionalNestedBJ）{
var值={}；
返回arr.filter（函数（项）{
瓦尔
if（项目类型[键]=“字符串”）{
val=项目[关键]；
}
否则{
val=item[key][optionalNestedObj]//本例中的列表名
}
var exists=值[val]；
值[val]=真；
返回！存在；
});
}
//滤器
vm.filterTest=函数（）{
返回函数（项目）{
log（“vm.exportMode:，vm.exportMode”）；
console.log（“item.exportMode:”，item.exportMode）；
如果（item.exportMode==vm.exportMode['fileFormat']）{
返回true；
}
日志（“项：”，项）
返回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'）；
})


JS-Bin
{{vm.formatList}json}
{{vm.exportMode}json}
    <!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>