ng-if指令

一、定义和用法

ng-if指令用于在表达式为false时移除html元素。

如果if语句执行结果为true，会添加移除元素，并显示。

ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。

语法：

<element ng-if="expression"></element>

参数值

<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>

三、实例2，ng-if指令添加动画效果

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>

<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>

ng-if和ng-show的区别

AngularJS动画（一）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!