onmyway onmyway - 6 months ago 28
Javascript Question

Change the value of ng-model field based upon a conditional ng-change

I hope you guys can help me.

I want to set the value of one of my AngularJS view fields based upon a (seemingly) simple conditional statement.

And I do believe the answer is going to be so simple, yet I haven't been able to find it after more than an hour of searching and trying stuff.

I think I might be trying to use the wrong directive (I have tried stuff like ng-if and ng-change).

This is what I want to achieve:

When I change the report Frequency to be Weekly

(ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId == Enum.ReportFrequency.Weekly)
set the value of my ng-model field
reportSettingsData.ReportFrequencyWeekdayName = "None"
.

And visa-versa; When I change the report Frequency to be Monthly
(ng-if="reportSettingsData.ReportFrequencyName.ReportFrequencyId != Enum.ReportFrequency.Weekly)
set the value of my ng-model field
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>


I thank you greatly in advance!

Answer

Ng-if directive is used to remove or create a dom element based on condition, refer this https://docs.angularjs.org/api/ng/directive/ngIf.

For your use case it is not required.

Bind to ng-change event and in the function set appropriate value on the model field.

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

Hope this helps.