Question

我希望你们能帮助我。

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

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

唯一的2个实际过滤器选项必须是每周和每月（当选择这两个选项时，必须禁用第二个下拉列表）。

当用户选择Weekly（ReportFrequencyType：2）时，必须过滤第二个下拉列表中的数据以显示与ReportFrequencySelectionType：2 匹配的记录（这是一周中的几天）

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

注意：我尝试了过滤器的变体，除其他外，我得到以下错误：无法获取未定义或空引用的属性'ReportFrequencySelectionType'[object Object]

这是我的控制器：

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

AngularJS根据另一个下拉选项（自定义过滤器）下拉选项

1 个答案: