Javascript 以角度方式相互过滤两个下拉列表

我有两个下拉列表。这些下拉列表中允许的选项应根据其他下拉列表中的内容进行过滤。下面是第一个下拉列表：

<select ng-model="filter.levelPregenerate">
  <option value="">All</option>
  <option value="assox">Associate's</option>
  <option value="bachx">Bachelor's</option>
  <option value="mastx">Master's</option>
  <option value="doctx">Doctorate</option>
  <option value="nondx">Non-Degree</option>
  <option value="bridx">Bridge</option>
</select>

第一个和第二个下拉列表中的选项应相互过滤。以下是两者之间的映射（过滤器应如何工作）：

因此，如果在第二个下拉列表中选择了“BA”，则“bachx”应该是第一个下拉列表中唯一可用的选项。相反，如果在第一个下拉列表中选择了“doctx”，则“DNP”、“EDD”和“PHD”应该是第二个下拉列表中唯一可选择的选项

这是一个包含完整代码的代码笔：

---

我不认为我可以简单地对第二个下拉列表应用一个基本的“| filter:foo”，因为它不知道如何过滤它。这样做的角度是什么

您可以设置自定义筛选器并返回应显示的值。有两种方法：

选项1-如果/否则

angular.module('programApp', [
    'programApp.controllers',
    'programApp.filters'
]);

angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
    return function(input, degreeTypePregenerate) {

    if (degreeTypePregenerate === 'assox') {
      return [];
    } else if (degreeTypePregenerate === 'bachx') {
      return ['BA', 'BS'];
    }

    // and so on..

    }
});

选项2-对象（我认为更干净）

最后，将筛选器应用于ng repeat，传入要筛选的变量：

<option ng-repeat="type in degreeType | orderBy:'toString()' | dropdownFilter:filter.levelPregenerate">{{type}}</option>

{{type}

---

工作代码笔：

这个问题听起来很熟悉。。您是否尝试在本页顶部的搜索框中键入

[angularjs]下拉筛选器

？希望出现一些相关的问题/答案。例如，这是另一篇关于SO的帖子，您是否认为您可能必须格式化

$scope.degreeType

中存储的数据以使映射更容易。。。e、 g.[{'assoc'：'BA'}，{'assoc'：'BS'}，…等]作为一个

对象数组

非常完整的答案。非常感谢。

assox: '';
bachx: 'BA, BS';
mastx: 'MA, MBA, MDIV, MED, MFA, MPH, MS';
doctx: 'DNP, EDD, PHD';
nondx: 'EDSPL, GRDCERT';
bridx: ''

angular.module('programApp', [
    'programApp.controllers',
    'programApp.filters'
]);

angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
    return function(input, degreeTypePregenerate) {

    if (degreeTypePregenerate === 'assox') {
      return [];
    } else if (degreeTypePregenerate === 'bachx') {
      return ['BA', 'BS'];
    }

    // and so on..

    }
});

angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
    return function(input, degreeTypePregenerate) {

        var degreeType = {
            'assox': [],
            'bachx': ['BA', 'BS']
        };

    return degreeType[degreeTypePregenerate];

    }
});

<option ng-repeat="type in degreeType | orderBy:'toString()' | dropdownFilter:filter.levelPregenerate">{{type}}</option>