AngularJS下拉选项基于另一个下拉选择（自定义过滤器）

Question

我希望你们能帮助我。

我试图根据另一个下拉列表的值来筛选下拉列表中的下拉选择。

我有一个列表是我选择的报告频率（每周，每月等）和另一个我希望根据此选择过滤的列表。

唯一2实滤波器选项必须是每周和每月（被选择没有这些时必须禁止所述第二下拉）。

当用户选择每周（ReportFrequencyType：2），在第二个下拉的数据必须被过滤，以显示这些记录匹配ReportFrequencySelectionType：2（其为一周中的天数）

下面我和我试图创建过滤器代码：

注：我已经试过了过滤器的变化，并且在其他之中，我得到以下错误：无法获取的未定义或空引用属性“ReportFrequencySelectionType” [对象对象]

这是我的控制器：

(function() { 
    'use strict'; 

    angular 
     .module('app.reportSettings') 
     .controller('reportSettings', reportSettings); 

    reportSettings.$inject = ['$q', 'dataservice', 'logger', 'customerFactory', '$scope', '$location', 'loginfactory', '$filter', '$interval', 'reportSettingsFactory']; 

    function reportSettings($q, dataservice, logger, customerFactory, $scope, $location, loginfactory, $filter, $interval, reportSettingsFactory) { 
     var vm = $scope; 

     vm.saveSettings = saveSettings; 
     vm.FrequencyOptions = []; 
     vm.selectedReportNames = null; 

     vm.customFilter = function (reportSettingsData) { 
      if (reportSettingsData.SelectableReportFrequencySelectionNames.ReportFrequencySelectionType == vm.reportSettingsData.ReportFrequencyName.ReportFrequencyType) { 
       return true; 
      } else { 
       return false; 
      } 
     }; 

     activate(); 

     function activate() { 
      getData().then(getReportNames); 
     } 

     function getData() { 
      return reportSettingsFactory.getSettings() 
      .then(function (data) { 
       if (logger.displayCommandResult(data)) { 
        vm.reportSettingsData = data.Records[0]; 
        return vm.reportSettingsData; 
       } 
      }); 
     } 
} 
})(); 

这里是我2下拉在我的视图列出：

<!-- Frequency --> 
<div class="col-md-3"> 
    <label>Frequency</label> 
    <div class="input-dropdown"> 
     <cc-dropdown cc-placeholder="Report Frequency" 
         ng-model="reportSettingsData.ReportFrequencyName" 
         ng-options="reportSettingsData.SelectableReportFrequencyNames" 
         cc-fields="ReportFrequencyName" 
         cc-key-field="ReportFrequencyId" 
         cc-allow-search="reportSettingsData.SelectableReportFrequencyNames != null && reportSettingsData.SelectableReportFrequencyNames.length > 5" 
         name="iFrequencyName"> 
     </cc-dropdown> 
    </div> 
</div> 

<div class="col-md-3"> 
    <label>Frequency Options</label> 
    <div class="input-dropdown"> 
     <cc-dropdown cc-placeholder="Report Frequency Option" 
         ng-model="reportSettingsData.ReportFrequencySelectionName" 
         ng-options="reportSettingsData.SelectableReportFrequencySelectionNames | filter:customFilter" 
         ng-disabled="reportSettingsData.ReportFrequencyName.ReportFrequencyType != Enum.ReportFrequency.Monthly" 
         cc-fields="ReportFrequencySelectionName" 
         cc-key-field="ReportFrequencySelectionId" 
         cc-allow-search="true" 
         name="iFrequencySelections"> 
     </cc-dropdown> 
    </div> 
</div> 

这里是属于该过滤器中的数据的样本和下降：

"SelectableReportFrequencyNames": [ 
    { 
     "Id": "573ac13a8ac03497f7eef0e5", 
     "ReportFrequencyId": 1, 
     "ReportFrequencyName": "Daily", 
     "ReportFrequencyType": 1 
    }, 
    { 
     "Id": "573ac1608ac03497f7eef0e6", 
     "ReportFrequencyId": 2, 
     "ReportFrequencyName": "Weekly", 
     "ReportFrequencyType": 2 
    }, 
    { 
     "Id": "573ac1728ac03497f7eef0e7", 
     "ReportFrequencyId": 3, 
     "ReportFrequencyName": "Monthly", 
     "ReportFrequencyType": 3 
    }, 
    { 
     "Id": "573ac1dc8ac03497f7eef0e8", 
     "ReportFrequencyId": 4, 
     "ReportFrequencyName": "Business Days", 
     "ReportFrequencyType": 4 
    }, 
    { 
     "Id": "573ac1fb8ac03497f7eef0e9", 
     "ReportFrequencyId": 5, 
     "ReportFrequencyName": "Full Week", 
     "ReportFrequencyType": 5 
    } 
], 
"SelectableReportFrequencySelectionNames": [ 
    { 
     "Id": null, 
     "ReportFrequencySelectionId": 1, 
     "ReportFrequencySelectionName": "Monday", 
     "ReportFrequencySelectionType": 2 
    }, 
    { 
     "Id": null, 
     "ReportFrequencySelectionId": 2, 
     "ReportFrequencySelectionName": "Tuesday", 
     "ReportFrequencySelectionType": 2 
    }, 
    { 
     "Id": null, 
     "ReportFrequencySelectionId": 3, 
     "ReportFrequencySelectionName": "Wednesday", 
     "ReportFrequencySelectionType": 2 
    } 
] 

非常感谢您提前！

Answer 1

了大量的研究和试错后，特此答案和工作解决我的问题（我知道这是众多解决方案之一）：

我利用了NG-改变指令，而是然后在AngularJS视图中应用不同的案例或过滤器，我在我的控制器中调用了一个函数来执行简单的.forEach循环并收集我的适当数据。

这是我的观点：

<!-- Frequency --> 
<div class="col-md-3"> 
    <label>Frequency</label> 
    <div class="input-dropdown"> 
     <cc-dropdown cc-placeholder="Report Frequency" 
         ng-model="reportSettingsData.ReportFrequencyName" 
         ng-options="reportSettingsData.SelectableReportFrequencyNames" 
         ng-change="frequencyChanged()" 
         cc-fields="ReportFrequencyName" 
         cc-key-field="ReportFrequencyId" 
         cc-allow-search="reportSettingsData.SelectableReportFrequencyNames != null && reportSettingsData.SelectableReportFrequencyNames.length > 5" 
         name="iFrequencyName"> 
     </cc-dropdown> 
    </div> 
</div> 

这里是我的控制器功能：

vm.frequencyChanged = function() { 

    var allFrequencyOptions = vm.ReportFrequencySelections; // myArray 
    var selectedfrequencyOptions = []; 

    if (vm.reportSettingsData.ReportFrequencyName.ReportFrequencyId === 2) { 
     allFrequencyOptions.forEach(function (a) { 
      if (a.ReportFrequencySelectionType === 2) { 
       selectedfrequencyOptions.push(a) 
      } 
     }); 
    } 
    else if (vm.reportSettingsData.ReportFrequencyName.ReportFrequencyId === 3) { 
     allFrequencyOptions.forEach(function (a) { 
      if (a.ReportFrequencySelectionType === 3) { 
       selectedfrequencyOptions.push(a) 
      } 
     }); 
    } 
    else { 
     selectedfrequencyOptions = []; 
    } 

    vm.reportSettingsData.SelectableReportFrequencySelectionNames = selectedfrequencyOptions; 
    return; 
}