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