AngularJS | ng-if指令

AngularJS中的ng-if指令用于根据表达式删除或重新创建HTML元素的一部分。 ng-if与ng-hide不同，因为它可以完全删除DOM中的元素，而不仅仅是隐藏元素的显示。如果其中的表达式为false，则删除该元素；如果为true，则将该元素添加到DOM。
句法：

 Contents... 

如果expression返回true，则创建该元素；如果expression返回false，则该元素被完全删除。
示例1：本示例在单击按钮后更改内容。

HTML

     

    ng-if Directive
     
    
    

 

     
    
        GeeksforGeeks
    
     
    ng-if Directive
     
    
        
            
                     
             
Click to Sign in
 
        
         
        
            
                Sign out
            
             
             

                GeeksforGeeks is the computer
                science portal for geeks.
            
 
        
    
     
    
        var app = angular.module("geek", []);
        app.controller('app', ['$scope', function ($scope) {
            var vm = this;
        }]);
    

 

输出：
在点击按钮之前：

单击按钮后：

示例2：此示例在选中复选框时添加了一些内容。

html

 

    ng-if Directive
     
    
    
 
    
        .geek {
            border: 1px solid black;
            padding: 10px;
            font-size: 15px;
            color: white;
            width: 50%;
            background: green;
        }
    

 

     
    
        GeeksforGeeks
    
     
    ng-if Directive
     
    
        
         
        
            Check it
        
         
        
         
        
            GeeksforGeeks is the computer science
            portal for geeks.
        
    

 

输出：
在将复选框标记为选中之前：

将复选框标记为选中后：