[英]Angular JS Multiple condition in ng-if
我在我的應用程序中使用角度js,在這種情況下,如果type === 'await_otp'
然后在div中顯示兩個按鈕(重新發送otp和取消按鈕),那么如果type === 'submitted'
顯示取消按鈕。如果以上條件均不滿足,則不顯示按鈕。
之前我為每種情況使用了兩個單獨的按鈕並顯示了button.But我想使用一個功能來處理此問題。
誰能告訴我該怎么做。
<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';
}
您可以只使用一個函數,但可以將要查找的條件作為參數傳遞。
例如你可以
function isConditionMet(conditionType: string){
return vm.applicationDetails && vm.applicationDetails.state === conditonType;
}
然后您可以在模板中使用它,例如
<div *ngIf="isConditionMet('await_otp_verif')">... </div>
您可以使用一種條件並根據訪問類型進行區分。
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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.