ng-if和ng-show的区别

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/angularjs/148455.html

猜你在找的Angularjs相关文章