AngularJS ng-if 指令

  • 定义和用法

    如果表达式的计算结果为 false,则 ng-if 指令将删除 HTML 元素。
    如果if语句的值为true,则将元素的副本添加到DOM中。
    ng-if 指令与 ng-hide 不同,后者隐藏元素的显示,其中 ng-if 指令将元素从 DOM 中完全删除。
  • 语法

    <element ng-if="expression"></element>
    
    所有的HTML元素支持该指令。
  • 参数

    参数 必需的 描述
    expression 该表达式返回false时将完全删除该元素。 如果返回true,则将插入该元素的副本。
  • 示例

    下例演示了使用AngularJS创建href:
    <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>欢迎来到蝴蝶教程</title>
     <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
     </head>
     <body ng-app="">
              <p>如果未选中此复选框,则将删除DIV元素。 </p>
              <p>如果选中复选框,DIV元素将返回。 </p>
              勾选复选框执行ng-if效果:  <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
              <div ng-if="myVar">
                 <h1>欢迎 </h1>
                 <p>欢迎来到蝴蝶教程 </p>
                 <hr>
              </div>
            
     </body>
     </html>
    
    尝试一下