Question

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

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

第二个下拉列表是ng-repeat，如下所示：

<select ng-model="filter.degreeTypePregenerate">
  <option value="">All</option>
  <option ng-repeat="type in degreeType | orderBy:'toString()'">{{type}}</option>
</select>

以上是重复的数组：

$scope.degreeType = ['BA', 'BS', 'MA', 'MBA', 
                     'MDIV', 'MED', 'MFA', 'MPH', 
                     'MS',' DNP', 'EDD', 'PHD', 
                     'EDSPL', 'GRDCERT'];

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

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

所以，如果＆＃39; BA＆＃39;在第二个下拉菜单中被选中，＆＃39; bachx＆＃39;应该是第一个下拉列表中唯一可用的选项。相反，如果＆＃39; doctx＆＃39;在第一个下拉列表中选择，＆＃39; DNP＆＃39; EDD＆＃39;以及＆＃39; PHD＆＃39;应该是第二个下拉列表中唯一可选择的选项。

这是Codepen的完整代码：http://codepen.io/trueScript/pen/LVZKEo

我不认为我可以简单地应用基本的＆＃39; |滤波器：FOO＆＃39;第二次下拉，因为它不知道如何过滤它。 Angular的方法是什么？

Answer 1

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

选项1 - 如果/ else

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 - 一个对象（我认为是清洁工）

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

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

    return degreeType[degreeTypePregenerate];

    }
});

最后，将过滤器应用于ng-repeat，传递要过滤的变量：

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

工作代码：Codepen

基于角度方式过滤两个下拉列表

1 个答案: