Выпадающие опции AngularJS на основе другого выпадающего списка (настраиваемый фильтр)

Question

Надеюсь, вы, ребята, можете мне помочь.

Я пытаюсь отфильтровать выпадающий список выпадающего списка в зависимости от значения другого выпадающего списка.

У меня есть один список, который является моим выбором частоты (Еженедельно, Ежемесячно и т. Д.), И еще один список, который я хотел бы отфильтровать в соответствии с этим выбором.

Варианты только 2 реальный фильтр должен быть Еженедельно и Ежемесячный (второй выпадающий должен быть отключен, если ни один из них выбраны).

Когда пользователь выбирает Weekly (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

После долгих исследований и проб и ошибок, при этом ответ и рабочего раствора на мой вопрос (я знаю, что это один из многих решений):

Я использовал директиве нг-изменения, но вместо того, чтобы затем применяя различные случаи или фильтры в стороне зрения 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; 
}