以 Angular 方式相互过滤两个下拉列表

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

因此，如果 'BA' 在第二个下拉列表中被 select 编辑，那么 'bachx' 应该是第一个下拉列表中唯一可用的选项。相反，如果 'doctx' 在第一个下拉列表中被 select 编辑，'DNP'、'EDD' 和 'PHD' 应该是仅有的 select-able 选项在第二个下拉菜单中。

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

我不认为我可以简单地应用一个基本的'| filter:foo' 到第二个下拉列表，因为它不知道如何过滤它。 Angular 的方法是什么？

Answer 1

您可以设置自定义过滤器和 return 应显示的值。两种方法：

选项 1 - If/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

以 Angular 方式相互过滤两个下拉列表

Filter Two Dropdowns Based on One Another the Angular Way

html

javascript

select

angularjs

drop-down-menu