如何使用ng-if检查元素在DOM上是否可见？

ng-if指令： AngularJS中的ng-if指令用于根据表达式删除或重新创建HTML元素的一部分。如果其中的表达式为false，则删除该元素；如果为true，则将该元素添加到DOM。

句法：

 Contents... 

方法：

• 考虑一个包含三个项目的检查清单。
• 一旦购买了所有物品，我们就会显示一条消息：“所有物品都已购买！”。
• 在开始时，NG-IF将从DOM树的一部分中删除此消息，并在表达式在DOM中重新创建时被评估为true时基于表达式。
• 为了观察这些变化，我们将检查Web Brower上的代码。使用不同的方法可以在Google Chrome中启用Inspect：
  • 菜单栏->更多工具->开发人员工具。
  • 在浏览器中右键单击->检查
  • Ctrl + Shift + I(Windows)
  • Cmd + Opt + I(Mac OS)

注意：有关更多信息，请访问chrome-inspect-element-tool-shortcut。

代码实现：

HTML

  

    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            A computer science portal for geeks
        
        
            
                Buy {{item.name}} {{item.quantity}}
                
                    Bought
                
            
        
        
            Everything is Bought!
        
  
    
    
        (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);
                };
            });
        })();
    

  

输出：

单击所有按钮之前：在这里，我们有三个按钮可以单击并购买各自的物品。

在“检查”窗口中：我们可以看到ng-if被注释掉，并且作为表达式的DOM树的一部分被评估为False。

单击所有按钮后：当我们单击所有按钮并购买了每件商品时，屏幕上会显示一条消息。

在“检查”窗口中：我们可以看到现在不再对ng-if进行注释，并且它已经成为DOM树的一部分，因为表达式的评估结果为True。

此gif输出显示了正在发生的一切。