Angular 中帶有多個條件的 Ng-If

Muhammad Adil 2023年1月30日 2022年4月20日
  1. AngularJS 中 ng-if 的工作原理
  2. AngularJS 中的 <ng-template>
  3. 使用 ngIf 的多個條件
  4. 使用 *ngIf 比較字串是否相等
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-ifng-showAngular 指令之間的區別,然後才能深入瞭解。

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 條件 (||)

如果只有一個條件為真,你可以使用 *ngIfOR (||) 運算子的幫助下顯示元素。以下程式碼片段演示了在 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 avatar Muhammad Adil avatar

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