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

时间:2016-05-20 08:30:00

标签: javascript angularjs enums

我希望你们能帮助我。

我想基于(看似)简单的条件语句设置我的一个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>

我提前感谢你!

1 个答案:

答案 0 :(得分: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".
  }
};

希望这有帮助。