AngularJS ng-if 判断 DOM 元素显示与隐藏
发布日期 ： 2024-06-01 13:30:50 UTC
访问量： 10 次浏览
如何用ng-if检查一个元素在DOM上是否可见
ng-if指令：
AngularJS中的 ng-if 指令用于根据一个表达式移除或重新创建HTML元素的一部分。
如果表达式为假，则该元素被移除；如果为真，则该元素被添加到DOM中。
语法:
<element ng-if="expression"> Contents... </element>
步骤:
- 考虑做一个包含三个项目的核对清单。
- 一旦所有物品被买走，我们就会显示一条信息–“所有物品都被买走了！”。
- 在开始的时候，
ng-if从DOM树中删除这个信息，并且基于表达式，当它被评估为真时，它在DOM中被重新创建。 - 为了观察这些变化，我们将在网络浏览器上检查代码。在谷歌浏览器中启用检查的不同方法。
- 菜单栏 -> 更多工具 -> 开发者工具。
- 在浏览器中右击 -> 检查
- Ctrl + Shift + I (Windows)
- Cmd + Opt + I (Mac OS)
注意：
更多信息请访问chrome-inspect-element-tool-shortcut。
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"
class="w3-container">
<h1 align="center" class="w3-text-green">
GeeksforGeeks
</h1>
<h4 align="center" class="w3-text-green">
A computer science portal for geeks
</h4>
<ul>
<li ng-repeat="item in items">
Buy {{item.name}} {{item.quantity}}
<button ng-click=Bought(index)
class="w3-button w3-round w3-border
w3-margin-bottom">
Bought
</button>
</li>
</ul>
<p class="w3-text-red" align="center"
ng-if="items.length == 0">
Everything is Bought!
</p>
</div>
<script type="text/javascript">
(function () {
angular.module("myApp", []).controller(
"myCtrl", function (scope) {
scope.items = [
{ name: "Milk", quantity: "2 Packet" },
{ name: "Biscuit", quantity: "10 Packet" },
{ name: "Bread", quantity: "5 Packet" }
];
scope.Bought = function (index) {
$scope.items.splice(index, 1);
};
});
})();
</script>
</body>
</html>
输出:
在点击所有按钮之前：
这里，我们有三个按钮可以点击并购买各自的物品。
在检查窗口中：
我们可以看到 ng-if 被注释掉了，作为表达式的一部分，DOM树被评估为False。
点击所有按钮后：
由于我们已经点击了所有按钮并购买了每件物品，屏幕上显示了一条信息。
在检查窗口：
我们可以看到 ng-if 现在已经没有注释了，现在它是DOM树的一部分，表达式被评估为True。
这个GIF输出显示了正在发生的一切。
