<element ng-if="expression"></element>
参数值
值 | 描述 |
---|---|
expression | 如果表达式返回 false 则会移除整个元素,如果为 true,则会添加元素。 |
二、实例1,ng-if控制元素的显示或删除
<div class="container" ng-app="myApp"> <h3>ng-if指令demo</h3> <p> <label> 保留HTML:<input type="checkBox" ng-model="show" ng-init="show=true" /> </label> </p> <div class="panel panel-success" ng-if="show"> <div class="panel-heading"><div class="panel-title">主面板</div></div> <div class="panel-body"> 主体内容 </div> </div> </div> <script> var app = angular.module('myApp',[]); </script>
@H_403_0@
@H_403_0@三、实例2,ng-if指令添加动画效果 @H_403_0@1,引用
<link href="../Content/bootstrap.min.css" rel="stylesheet" /> <link href="../Content/ng-animation.css" rel="stylesheet" /> <script src="../Scripts/Angular/angular.min.js"></script> <script src="../Scripts/Angular/angular-animate.min.js"></script>2.html
<div class="container" ng-app="myApp"> <h3>ng-if指令+flip-in动画</h3> <p> <label> 保留HTML:<input type="checkBox" ng-model="show" ng-init="show=true" /> </label> </p> <div class="panel panel-success flip-in" ng-if="show"> <div class="panel-heading"><div class="panel-title">主面板</div></div> <div class="panel-body"> 主体内容 </div> </div> </div> <script> var app = angular.module('myApp',['ngAnimate']); </script>
更多: @H_403_0@ng-if和ng-show的区别 @H_403_0@AngularJS动画(一)