Angular JS Multiple condition in ng-if

Question

I am using angular js for my application in which i am having a scenario of if the type === 'await_otp' then display two buttons(resend otp and cancel button) in the div else if the type === 'submitted' then show cancel button.If none of the above conditions met then don't display buttons.

Earlier i have used two seperate buttons for each condtions and displayed the button.But i would like to use a single function to handle this.

Can anyone tell me how to do it.

<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;
  }
}

Functions which i have used earlier:

function isAwaitingOtp () {
  return vm.applicationDetails && vm.applicationDetails.state === 'await_otp_verif';
}

function isSubmitted () {
  return vm.applicationDetails && vm.applicationDetails.state === 'submitted';
}

rayray · Accepted Answer · 2018-08-27 13:46:02Z

2

You can simply use a single function but pass the condition you are looking for as a parameter.

For example you can do

function isConditionMet(conditionType: string){
     return vm.applicationDetails && vm.applicationDetails.state === conditonType;
}

and then you can use it in the template like

<div *ngIf="isConditionMet('await_otp_verif')">... </div>

answered Aug 27, 2018 at 13:46

rayray

1,8551 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suresh Kumar Ariya · Accepted Answer · 2018-08-27 13:43:12Z

0

You can use one condition and differentiate with access type.

function canShowCancel (type: string) {
  if (type === 'submit' && vm.applicationDetails && (vm.applicationDetails.state === 'submitted') {
    return true;
  }else if(type === 'verif' && vm.applicationDetails && vm.applicationDetails.state === 'await_otp_verif')){
    return true;;
  }else{
    return false;
  }
}

answered Aug 27, 2018 at 13:43

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular JS Multiple condition in ng-if

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related