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

Question

I hope you guys can help me.

I am trying to filter the drop down selections of a drop down list, based on the value of another drop down list.

I have one list that is my selection of reporting Frequency (Weekly, Monthly etc.), and another list that I would like filtered according to this selection.

The only 2 real filter options must be Weekly and Monthly (the second drop down must be disabled when neither of these are selected).

When the user select Weekly (ReportFrequencyType: 2), the data in the second drop down must be filtered to display those records matching ReportFrequencySelectionType: 2 (which are the days of the week)

Below my code with my attempt to create the filter:

Note: I have tried variations of the filter, and amongst others, I get the following Error: Unable to get property 'ReportFrequencySelectionType' of undefined or null reference [object Object]

Here is my controller:

(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;
                }
            });
        }
}
})();

Here are my 2 drop down lists in my view:

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

Here is a sample of the data pertaining to the filter and drop downs:

"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
    }
]

Thank you greatly in advance!

Answer 1

After a lot of research and trail and error, herewith the answer and working solution to my question (I know this is one of many solutions):

I made use of the ng-change directive, but instead of then applying different cases or filters in the AngularJS view side, I called a function in my controller to do a simple .forEach loop and gather my appropriate data.

Here is my view:

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

Here is the function in my controller:

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