欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

 更新時(shí)間:2017年05月07日 11:14:04   作者:StrongerSY  
在Angular的原生指令中有這幾個(gè)指令用來控制元素的展示與否,ng-show/ng-hide/ng-if和ng-switch。在angular性能優(yōu)化中,我們也常常會(huì)用到它。這篇文章主要給大家介紹了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程,需要的朋友可以參考。

前言

最近在做一個(gè)項(xiàng)目改版,第一次在項(xiàng)目中真正使用Angular,和平時(shí)自己寫寫小demo,做做練習(xí)的感覺還是非常不同的,感覺非常的新鮮。有幾個(gè)指令是經(jīng)常用到的,這里由于這幾個(gè)有點(diǎn)共性,所以一起介紹一下ng-if,ng-show/ng-hide,ng-switch 這幾個(gè)指令。下面來看看詳細(xì)的介紹:

共性

       1.這里個(gè)指令都是Angular框架提供給我們的設(shè)置頁面內(nèi)容顯示和隱藏的方法,使用起來非常方便,尤其是做業(yè)務(wù)邏輯。

       2.都是通過一個(gè)表達(dá)式的值來實(shí)現(xiàn)切換顯示的,只不過 ng-switch 可以是其他值,ng-if ng-show 就必須是 boolen了。

       3.我在使用過程中發(fā)現(xiàn)一個(gè)小技巧,我們通過表達(dá)式設(shè)置 ng-if 或者 ng-show 直接在頁面中定義一個(gè)表達(dá)式,這個(gè)時(shí)候它的值其實(shí)是undefined,由于 !== true 所以這部分默認(rèn)也是隱藏。

那么既然是不同指令,就各自有專攻,那我們就來看看他們分別都有什么果實(shí)能力。。。(不看海賊的可以無視哈~~)

ng-show/ng-hide

在用原生js 或者 jquery的時(shí)候,我們一般都可以定義一個(gè)類,通過添加和刪除這個(gè)類來實(shí)現(xiàn)元素的顯示和隱藏切換。其實(shí)這部分從網(wǎng)上參考資料來看,Angular也是這樣實(shí)現(xiàn)的,根據(jù)表達(dá)式正確與否,動(dòng)態(tài)添加或者刪除 ng-hide 這個(gè)Angualr預(yù)先定義好的class。調(diào)用方式具體如下:

可以是設(shè)置一個(gè)變量

<div ng-show='show'></div>

也可以是直接使用 true / false

<div ng-show='true'></div>

對(duì)于變量,我們?cè)趈s 中直接設(shè)置這個(gè)值就可以。

這個(gè)指令的特性是,即使我們暫時(shí)隱藏這部分內(nèi)容,它也會(huì)被dom 渲染。

ng-if

使用方式也是設(shè)置一個(gè)表達(dá)式:

可以是設(shè)置一個(gè)變量

<div ng-if='more'></div>

也可以是直接使用 true / false

<div ng-if='true'></div>

對(duì)于變量,我們?cè)趈s 中直接設(shè)置這個(gè)值就可以。

這是一個(gè)能幫我們節(jié)省效率的指令,如果表達(dá)式值 === false , 則這部分不會(huì)在dom中渲染,或者原有的內(nèi)容會(huì)被從dom中刪除。所以如果有一部分內(nèi)容,不需要一開始就顯示,我們可以先用ng-if 讓它隱藏。例如一個(gè)顯示更多的下拉按鈕,剛開始不顯示的部分,可以ng-if 來設(shè)置,等我們點(diǎn)擊了更多按鈕,再設(shè)置ng-if = true 既可。這樣子減少了頁面渲染事件,提高了效率呢。

還有一個(gè)特性,ng-if 或創(chuàng)建自己的 scope,它通過原型繼承父級(jí)的scope。一個(gè)典型的例子來自于參考資源1。

還有一個(gè)小坑,$scope上面我可以直接給一個(gè)屬性賦值如:

$scope.showpage = 'abut'

但是如果直接賦值一個(gè)對(duì)象,對(duì)不起,需要先聲明,再給對(duì)象添加屬性

$scope.data = {};
$scope.data.showpage = 'about';

ng-swith

使用方式比前前兩個(gè)復(fù)雜一點(diǎn),不過也非常直觀,類似原生js 中的switch 函數(shù):

在外層父級(jí)元素設(shè)置 ng-switch 為一個(gè)表達(dá)式A ,那么他的子元素相當(dāng)于幾個(gè)不同的選項(xiàng),表達(dá)式A 對(duì)應(yīng)哪個(gè)子元素的 ng-switch-with 值,就顯示那部分。

<div ng-switch='showpart'>
 <div ng-switch-default></div>
 <div ng-switch-with='home'></div>
 <div ng-switch-with='blog'></div>
 <div ng-switch-with='about'></div>
 <div ng-switch-with='contact'></div>
</div>

這也是一個(gè)能幫我們節(jié)省效率的指令。和ng-if 一樣,一開始如果不等于父級(jí)的 ng-switch 表達(dá)式的值,則不會(huì)在頁面渲染的,而且我們也可以通過 ng-switch-default 來設(shè)置默認(rèn)的顯示部分。比如以往常見的 Tab 選項(xiàng)卡,用這個(gè)指令實(shí)現(xiàn)起來就非常的容易。

這里有一點(diǎn)疑問,因?yàn)槲以陧?xiàng)目中,做的單頁面應(yīng)用,所有不同部分都在一個(gè)頁面里面。那么我經(jīng)常需要根據(jù)不同的ajax返回值,顯示不同的部分,(特殊原因不能使用路由),所以我這里就是用的 ng-switch 指令,根據(jù)不同返回值,顯示不同部分。雖然也能實(shí)現(xiàn)按需顯示,但看到有文章說這樣使用 ng-switch 并不是很妥當(dāng),路過的朋友,有了解的可以指點(diǎn)我一下!我在這先謝過了~~

后面我會(huì)繼續(xù)分享Angular在項(xiàng)目開發(fā)中的經(jīng)驗(yàn),以及遇到的坑!

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Angular.js能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論