ng-if指令

96 阅读 0 评论 64 点赞

我是靠谱客的博主冷艳巨人，最近开发中收集的这篇文章主要介绍ng-if指令，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、定义和用法

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

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

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

语法：

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

三、实例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>

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>

ng-if和ng-show的区别

AngularJS动画（一）