I have a scenario in my AngularJS application where I need to display different buttons based on the value of type. If type === 'await_otp', then I should display two buttons (resend OTP and cancel), if type === 'submitted', then only the cancel button should be shown. If neither condition is met, no buttons should be displayed.
In the past, I had separate buttons for each condition but now I want to use a single function to handle this logic.
Could someone guide me on how to achieve this?
<ion-footer-bar style="height:auto">
<div ng-if="vm.canShowCancel()" class="bar bar-footer bar-assertive" style="position: absolute;" ng-click="vm.cancelApplication(vm.applicationDetails.id)">
<div class="title" translate>CANCELAPPLICATION</div>
</div>
<div class="bar" ng-if="!vm.canShowCancel()" style="position:absolute; bottom:0;text-align:center;padding:0 !important" >
<button style="min-width:50%; border-radius:0px" class="button button-balanced" ng-click="vm.resendOtp(vm.applicationDetails.id)"
translate>RESEND</button>
<button style="min-width:50%; border-radius:0px" class="button button-assertive" ng-click="vm.cancelApplication(vm.applicationDetails.id)" translate>CANCELAPPLICATION</button>
</div>
</ion-footer-bar>
Controller:
function canShowCancel () {
if (vm.applicationDetails && (vm.applicationDetails.state === 'submitted' || vm.applicationDetails.state === 'await_otp_verif')) {
return true;
}
}
Previous functions used:
function isAwaitingOtp () {
return vm.applicationDetails && vm.applicationDetails.state === 'await_otp_verif';
}
function isSubmitted () {
return vm.applicationDetails && vm.applicationDetails.state === 'submitted';
}