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

Question

我希望你们能帮助我。

我正在尝试根据另一个下拉列表的值过滤下拉列表的下拉选择。

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

只有 2 个真正的过滤器选项必须是 Weekly 和 Monthly（如果两者都没有选择，则必须禁用第二个下拉菜单）。

当用户选择 Weekly (ReportFrequencyType: 2) 时，必须过滤第二个下拉列表中的数据以显示匹配 ReportFrequencySelectionType: 2 的记录（即星期几） p>

在我尝试创建过滤器的代码下方：

注意：我尝试了过滤器的变体，除其他外，我收到以下错误：无法获取未定义或空引用 [object Object] 的属性“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-change 指令，但我没有在 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;
}