Угловое условие JS Multiple в ng-if

Question

Я использую угловую js для своего приложения, в котором у меня есть сценарий, если type === 'await_otp' затем отображать две кнопки (повторно отправить кнопку отмены и отменить) в div, в противном случае, если type === 'submitted', то показать кнопку отмены. Если Ни одно из указанных выше условий не выполнено, поэтому кнопки не отображаются.

Ранее я использовал две отдельные кнопки для каждого условия и отображал кнопку. Но я бы хотел использовать одну функцию для этого.

Может кто-нибудь сказать мне, как это сделать.

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

Контроллер:

function canShowCancel () {
  if (vm.applicationDetails && (vm.applicationDetails.state === 'submitted' || vm.applicationDetails.state === 'await_otp_verif')) {
    return true;
  }
}

Функции, которые я использовал ранее:

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

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

Answer 1

Вы можете просто использовать одну функцию, но передать условие, которое вы ищете, в качестве параметра.

Например, вы можете сделать

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

и затем вы можете использовать его в шаблоне как

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

Answer 2

Вы можете использовать одно условие и дифференцировать с типом доступа.

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