ng-if 和 ng-show控制是否显示

 文章参考 http://www.java123.net/993384.html

ng-show

ng-show接收的一个bool值，当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候，在DOM节点上添加了一个ng-hide的一个类，这个类的表达式就是“display：none”。DOM load的时候ng-show里面的所有节点都会被加载。也就是说，ng-show仅仅是影藏和显示了DOM节点。也就意味如果油太多的ng-show指令，即使他们不显示，但他们所在的DOM节点还是会被渲染的。

 

 ng-if

ng-if也接收的一个bool值，当它的值为false的时候，它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉，哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以，我们在项目开发中，如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候，就会去创建DOM节点。

 

 

<div class="footer_fixed text-right bg_ff all_width padding_top_5 padding_bottom_5">
    <button class="button float_right btn_sqh_yellow margin_left_15 margin_right_10" 
ng-if="formData.isShowCancelBtn" ng-click="payMoney({{jsonData.jz_id}})">
        支付
    </button>
    <button class="button float_right btn_sqh_gray" ng-if="formData.isShowPayBtn" 
ng-click="cancelOrderFun({{formData.jz_id}})">
        取消订单
    </button>
</div>