ng-if和ng-show的区别

一、说明

在angularjs中ng-if和ng-show/ng-hide 都能实现Dom元素在界面的显示和隐藏。

但是两者不同，ng-if在表达式为false的情况下删除了Dom元素，ng-show在表达式为false的情况下是隐藏元素并没有删除。

二、实例，在Bootstrap的按钮组中圆角问题

HTML：

<div class="container" ng-app="myApp" ng-init="showLast=true;">
    <h1 class="text-center">ng-if和ng-show在bootstrap按钮组中的不同</h1>
    <p>
        <label><input type="checkbox" ng-model="showLast" />显示最后一个</label>
    </p>
    <br />
    <div class="btn-group">
        <button class="btn btn-primary">button1</button>
        <button class="btn btn-primary">button2</button>
        <button class="btn btn-primary" ng-show="showLast">button3</button>
    </div>
    <br /><br />
    <div class="btn-group">
        <button class="btn btn-primary">button1</button>
        <button class="btn btn-primary">button2</button>
        <button class="btn btn-primary" ng-if="showLast">button3</button>
    </div>
</div>
<script>
    var app = angular.module('myApp',['ngAnimate']);
</script>

（编辑：李大同）

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