Angular JS ng-if 中的多个条件

Question

我正在为我的应用程序使用 angular js，其中我有一个场景，如果type === 'await_otp'然后在div 中显示两个按钮(重新发送 OTP 和取消按钮(，否则如果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;
}
}