成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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

前言

定制開發(fā)可以根據(jù)自己的需求進(jìn)行定制，成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

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

實(shí)現(xiàn)原理

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

在作用域方面，兩者也存在差異：當(dāng)一個(gè)元素被ng-if從DOM中刪除時(shí)，與其關(guān)聯(lián)的作用域也會(huì)被銷毀。而且當(dāng)它重新加入DOM中時(shí)，則會(huì)生成一個(gè)新的作用域，而ng-show和ng-hide則不會(huì)。

通過(guò)如下代碼并結(jié)合瀏覽器開發(fā)者工具可以清楚的看出二者之間的不同：

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

js

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

頁(yè)面最終的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）在原理上有很大的差別，所以在某些情況下展示出來(lái)的效果有較大的差別。

正確使用ng-if和ng-show

在使用bootstrap中，我們會(huì)經(jīng)常用到按鈕組，也就是btn-group，如果仔細(xì)觀察的話，會(huì)發(fā)現(xiàn)一個(gè)按鈕組的第一個(gè)和最后一個(gè)按鈕分別是有圓角的，如下圖：

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

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

在結(jié)合angular使用過(guò)程中，有時(shí)候需要根據(jù)一些條件來(lái)隱藏掉一些按鈕，當(dāng)隱藏第一個(gè)或最后一個(gè)按鈕時(shí)，會(huì)出現(xiàn)一些小問(wèn)題。

代碼：

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

效果如圖：

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

我們發(fā)現(xiàn)button2的圓角不見了，這和我們預(yù)期的效果不一致。

問(wèn)題是由ng-show引起的，而我們知道ng-show只是改變?cè)氐膁isplay屬性，所以我們把這個(gè)ng-show='false'改成 style='display:none' 的話也會(huì)有這個(gè)圓角消失的效果。

那么我們應(yīng)該怎么做，才會(huì)讓它顯示圓角呢？

如果我們想要達(dá)到顯示圓角的效果，那么我們應(yīng)該用ng-if ，只需要將代碼中的ng-show='false' 改成ng-if='false' 即可。

原因是：ng-if會(huì)根據(jù)表達(dá)式的值來(lái)決定當(dāng)前這個(gè)DOM元素的創(chuàng)建與銷毀。當(dāng)表達(dá)式為返回true時(shí)，創(chuàng)建，反之，則銷毀。銷毀就意味著這個(gè)DOM元素從頁(yè)面中刪除了。

效果如圖：

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

圓角顯示了，證明button3已經(jīng)從頁(yè)面中刪除了。

再進(jìn)一步，我們打開開發(fā)者工具也可以發(fā)現(xiàn)這個(gè)DOM元素確實(shí)已經(jīng)不存在了：

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

分享題目：Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹
本文網(wǎng)址：http://jinyejixie.com/article42/ppjdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、虛擬主機(jī)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)