Angular.js中ng-if、ng-show和ng-hide的區別介紹

2019-11-19 17:50:54

字體：大中小

來源：轉載

供稿：網友

前言

大家都知道在使用anularjs開發前端頁面時，常常使用ng-show、ng-hide、ng-if功能來控制頁面元素的顯示或隱藏，那他們之間有什么不同呢？下面通過這篇文章來一起看看吧。

實現原理

ng-show/ng-hide是通過修改CSS樣式方式控制元素顯示與隱藏，對應的DOM元素會一直存在于當前頁面中，而ng-if根據表達式的值動態的在當前的頁面中添加刪除頁面元素。如果賦值表達式的值為false，那么這個元素就會從頁面中刪除，否則會添加一個元素。ng-if創建元素時用的是被它編譯后的代碼，如果ng-if內部的代碼被其它方式修改過，那么修改只會對本次展現有效，頁面元素重新渲染后修改效果會消失，而ng-show/ng-hide則能夠保留dom元素上次修改后的狀態。

在作用域方面，兩者也存在差異：當一個元素被ng-if從DOM中刪除時，與其關聯的作用域也會被銷毀。而且當它重新加入DOM中時，則會生成一個新的作用域，而ng-show和ng-hide則不會。

通過如下代碼并結合瀏覽器開發者工具可以清楚的看出二者之間的不同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ng-if ng-show ng-hide</title> <script type="text/javascript" class="library" src="http://libs.useso.com/js/angular.js/1.2.9/angular.min.js"></script> </head><body> <div ng-controller="MainCtrl">  <div ng-show="false">   ng-show = false   </div>  <div ng-show="true">  ng-show=true   </div>  <div ng-if="true">  ng-if = true  </div>  <div ng-if="false">  ng-if = false  </div> </div> </body></html>

angular.module("app",[]).controller("MainCtrl",function($scope){});

頁面最終的HTML片斷如下：

<div ng-controller="MainCtrl" class="ng-scope"> <div ng-show="false" class="ng-hide"> ng-show = false  </div> <div ng-show="true" class=""> ng-show=true  </div> <!-- ngIf: true --><div ng-if="true" class="ng-scope"> ng-if = true </div><!-- end ngIf: true --> <!-- ngIf: false --></div>

由于ng-if/ng-hide（ng-show）在原理上有很大的差別，所以在某些情況下展示出來的效果有較大的差別。

正確使用ng-if和ng-show

在使用bootstrap中，我們會經常用到按鈕組，也就是btn-group，如果仔細觀察的話，會發現一個按鈕組的第一個和最后一個按鈕分別是有圓角的，如下圖：

但是中間的按鈕是沒有圓角的，這樣顯得比較美觀。

在結合angular使用過程中，有時候需要根據一些條件來隱藏掉一些按鈕，當隱藏第一個或最后一個按鈕時，會出現一些小問題。

代碼：

 <div class="row" ng-controller='myCtrl'>  <div class="col-lg-offset-1">  <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='false'>button3</button>  </div>  </div> </div>

效果如圖：