根据条件 ng-change 更改 ng-model 字段的值

Question

我希望你们能帮助我。

我想根据一个（看似）简单的条件语句来设置我的 AngularJS 视图字段之一的值。

而且我相信答案会如此简单，但经过一个多小时的搜索和尝试，我还是找不到它。

我想我可能试图使用错误的指令（我尝试过 ng-if 和 ng-change 之类的东西）。

这就是我想要实现的目标：

当我将报告频率更改为每周(ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId == Enum.ReportFrequency.Weekly) 时，设置我的 ng-model 字段的值reportSettingsData.ReportFrequencyWeekdayName = "None"。

反之亦然；当我将报告频率更改为每月(ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId != Enum.ReportFrequency.Weekly) 时，设置我的 ng-model 字段reportSettingsData.ReportFrequencyMonthDayName = "None" 的值。

<!-- 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"
                        ng-change="frequencyChanged()"
                        cc-key-field="ReportFrequencyId"
                        cc-allow-search="reportSettingsData.SelectableReportFrequencyNames != null && reportSettingsData.SelectableReportFrequencyNames.length > 5"
                        name="iFrequencyName">
        </cc-dropdown>
    </div>
</div>

<!-- Week Days / Month Days -->
<div class="col-md-3">
    <label>Frequency Options</label>
    <div class="input-dropdown" ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId != Enum.ReportFrequency.Weekly">
        <cc-dropdown cc-placeholder="Report Frequency Option"
                        ng-model="reportSettingsData.ReportFrequencyMonthDayName"
                        ng-options="reportSettingsData.SelectableReportFrequencyMonthDays"
                        ng-disabled="reportSettingsData.ReportFrequencyName.ReportFrequencyId != Enum.ReportFrequency.Monthly"
                        cc-fields="ReportFrequencyMonthDayName"
                        cc-key-field="ReportFrequencyMonthDayId"
                        cc-allow-search="true"
                        name="iFrequencyMonthDays">
        </cc-dropdown>
    </div>

    <div class="input-dropdown" ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId == Enum.ReportFrequency.Weekly">
        <cc-dropdown cc-placeholder="Report Frequency Option"
                        ng-model="reportSettingsData.ReportFrequencyWeekdayName"
                        ng-options="reportSettingsData.SelectableReportFrequencyWeekdays"
                        cc-fields="ReportFrequencyWeekdayName"
                        cc-key-field="ReportFrequencyWeekdayId"
                        cc-allow-search="true"
                        name="iFrequencyWeekdays">
        </cc-dropdown>
    </div>
</div>

我提前非常感谢您！

Answer 1

ng-if 指令用于根据条件删除或创建 dom 元素，请参阅此https://docs.angularjs.org/api/ng/directive/ngIf。

对于您的用例，它不是必需的。

绑定到 ng-change 事件并在函数中为模型字段设置适当的值。

$scope.frequencyChanged = function(){
   if($scope.reportSettingsData.ReportFrequencyName.ReportFrequencyId == Enum.ReportFrequency.Weekly){
   $scope.reportSettingsData.ReportFrequencyWeekdayName = "None".
  }
};

希望这会有所帮助。