Angular 中帶有多個條件的 Ng-If
ngIf
指令是 AngularJS (https://angular.io/features) 中的強大工具,可讓你動態顯示和隱藏 HTML 內容。它還可以根據表示式顯示或隱藏內容。如果 ng-if
指令的語句計算結果為 TRUE 布林值,則將元素插入 HTML 檢視;否則,它會從 DOM 中完全刪除。本文將討論具有多個條件的 AngularJS ng-if
。
語法:
<element ng-if="expression"**>
</element>**
AngularJS 中 ng-if
的工作原理
理解 AngularJS 框架提供的所有 In-Built 指令在 AngularJS 框架中總是以 ng 字首指定是至關重要的。ng-if
指令的語句評估為布林值,例如 True 或 False,並且元素根據該值顯示在 HTML DOM 上。
當 ng-if 表示式求值返回 False 值時,該元素將從 DOM 中刪除。要記住的另一件事是,當使用 ngIf
刪除 HTML 元素時,它的作用域會被破壞,當元素放回檢視時,會建立一個新的作用域。
在這裡,你需要了解 ng-if
和 ng-show
Angular 指令之間的區別,然後才能深入瞭解。
當 ng-if
指令的表示式評估為 FALSE 時,該元素將從 DOM 中刪除;但是,當 ng-show 指令的表示式評估為 FALSE 時,該元素隱藏在 DOM 中而不是被刪除,這是使用 display hidden
的 CSS 屬性完成的。
例子
如果你有 PHP 背景,你可以直接在 HTML 模板中編寫 if-else
塊,如下所示。
if(display){
<div>I am here</div>
}
else{
<div>
I am not here
</div>
}
但是,我們不能在 HTML 中使用括號來編寫 if-else 塊,因為 HTML 檔案中應該只包含標記元素。理想的解決方案是用某些東西替換 if else 條件塊。
AngularJS 中的 <ng-template>
在基本指令 ngIf
之前,你是否考慮過星號(*)?當在 *ngif
指令中使用 HTML 元素時,angular 將使用提供的條件將該元素包裝在 <ng-template>
標記中。要了解有關 ng-template 的更多資訊,單擊此處。
<ng-template [ngIf]="display">
<div>I am Playing</div>
</ng-template>
在 Angular 框架中,<ng-template>
是一個偽元素,不會包含在最終的 HTML 輸出中。只會插入 <ng-template>
中的元素。如果元素具有任何特徵,例如 id 或類,請使用它們。這些元素將附加到 <ng-template>
中的 <div>
元素。
<div *ngIf="display" class="information" id="info">
I am Playing
</div>
<ng-template [ngIf]="display">
<div class="information" id="info">
I am Playing
</div>
</ng-template>
使用 ngIf
的多個條件
讓我們討論 AngularJS ng-if 的以下條件。
第一個是 AND
條件,第二個是 OR
條件,第三個是 NOT
條件。
*ngIf
中的 and 條件(&&)
為了確定 *ngIf
語句的可信度,我們可以使用邏輯運算子 AND
(&&) 的多個條件。如果滿足所有條件,該元素將被新增到 DOM。下面的例子演示了 AngularJS 如何評估一個 AND
條件:
<div *ngIf="isCar && isBike">
<span>{{Name}}</span>
</div>
*ngIf
中的 OR 條件 (||)
如果只有一個條件為真,你可以使用 *ngIf
在 OR
(||) 運算子的幫助下顯示元素。以下程式碼片段演示了在 ngIf.
中使用 OR 條件。
<div *ngIf="isCar || isBike">
// Show Price comparison chart
</div>
*ngIf 中的 OR 條件(!)
要反轉*ngIf
條件,我們可以使用 NOT
運算子(!),如下所示。
<div *ngIf="!isCar">
//Show the Prices of Bikes
</div>
使用 *ngIf
比較字串是否相等
在 *ngIf
語句中,我們可以應用 double equal(==)
或 triple equal(===)
運算子來比較字串是否相等。
在比較字串是否相等時,很容易放錯位置或忘記使用雙等或三等,而是使用賦值運算子(單等)。
當你在 *ngIf
中使用賦值運算子時,你將收到 Parser Error: Bindings cannot contain assignments at column
錯誤,如下所示。
<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>
在比較 *ngIf
中的靜態字串時,應使用引號。比較元件字串變數時無需使用引號。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook