Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
前言
最近在做一個項目改版,第一次在項目中真正使用Angular,和平時自己寫寫小demo,做做練習的感覺還是非常不同的,感覺非常的新鮮。有幾個指令是經(jīng)常用到的,這里由于這幾個有點共性,所以一起介紹一下ng-if,ng-show/ng-hide,ng-switch 這幾個指令。下面來看看詳細的介紹:
共性
1.這里個指令都是Angular框架提供給我們的設(shè)置頁面內(nèi)容顯示和隱藏的方法,使用起來非常方便,尤其是做業(yè)務(wù)邏輯。
2.都是通過一個表達式的值來實現(xiàn)切換顯示的,只不過 ng-switch 可以是其他值,ng-if ng-show 就必須是 boolen了。
3.我在使用過程中發(fā)現(xiàn)一個小技巧,我們通過表達式設(shè)置 ng-if 或者 ng-show 直接在頁面中定義一個表達式,這個時候它的值其實是undefined,由于 !== true 所以這部分默認也是隱藏。
那么既然是不同指令,就各自有專攻,那我們就來看看他們分別都有什么果實能力。。。(不看海賊的可以無視哈~~)
ng-show/ng-hide
在用原生js 或者 jquery的時候,我們一般都可以定義一個類,通過添加和刪除這個類來實現(xiàn)元素的顯示和隱藏切換。其實這部分從網(wǎng)上參考資料來看,Angular也是這樣實現(xiàn)的,根據(jù)表達式正確與否,動態(tài)添加或者刪除 ng-hide 這個Angualr預(yù)先定義好的class。調(diào)用方式具體如下:
可以是設(shè)置一個變量
<div ng-show='show'></div>
也可以是直接使用 true / false
<div ng-show='true'></div>
對于變量,我們在js 中直接設(shè)置這個值就可以。
這個指令的特性是,即使我們暫時隱藏這部分內(nèi)容,它也會被dom 渲染。
ng-if
使用方式也是設(shè)置一個表達式:
可以是設(shè)置一個變量
<div ng-if='more'></div>
也可以是直接使用 true / false
<div ng-if='true'></div>
對于變量,我們在js 中直接設(shè)置這個值就可以。
這是一個能幫我們節(jié)省效率的指令,如果表達式值 === false , 則這部分不會在dom中渲染,或者原有的內(nèi)容會被從dom中刪除。所以如果有一部分內(nèi)容,不需要一開始就顯示,我們可以先用ng-if 讓它隱藏。例如一個顯示更多的下拉按鈕,剛開始不顯示的部分,可以ng-if 來設(shè)置,等我們點擊了更多按鈕,再設(shè)置ng-if = true 既可。這樣子減少了頁面渲染事件,提高了效率呢。
還有一個特性,ng-if 或創(chuàng)建自己的 scope,它通過原型繼承父級的scope。一個典型的例子來自于參考資源1。
還有一個小坑,$scope上面我可以直接給一個屬性賦值如:
$scope.showpage = 'abut'
但是如果直接賦值一個對象,對不起,需要先聲明,再給對象添加屬性
$scope.data = {}; $scope.data.showpage = 'about';
ng-swith
使用方式比前前兩個復雜一點,不過也非常直觀,類似原生js 中的switch 函數(shù):
在外層父級元素設(shè)置 ng-switch 為一個表達式A ,那么他的子元素相當于幾個不同的選項,表達式A 對應(yīng)哪個子元素的 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>
這也是一個能幫我們節(jié)省效率的指令。和ng-if 一樣,一開始如果不等于父級的 ng-switch 表達式的值,則不會在頁面渲染的,而且我們也可以通過 ng-switch-default 來設(shè)置默認的顯示部分。比如以往常見的 Tab 選項卡,用這個指令實現(xiàn)起來就非常的容易。
這里有一點疑問,因為我在項目中,做的單頁面應(yīng)用,所有不同部分都在一個頁面里面。那么我經(jīng)常需要根據(jù)不同的ajax返回值,顯示不同的部分,(特殊原因不能使用路由),所以我這里就是用的 ng-switch 指令,根據(jù)不同返回值,顯示不同部分。雖然也能實現(xiàn)按需顯示,但看到有文章說這樣使用 ng-switch 并不是很妥當,路過的朋友,有了解的可以指點我一下!我在這先謝過了~~
后面我會繼續(xù)分享Angular在項目開發(fā)中的經(jīng)驗,以及遇到的坑!
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家學習或者使用Angular.js能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Bootstrap和Angularjs配合自制彈框的實例代碼
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼,代碼簡單易懂,有需要的朋友跟著小編一起學習2016-08-08Angular directive遞歸實現(xiàn)目錄樹結(jié)構(gòu)代碼實例
本篇文章主要介紹了Angular directive遞歸實現(xiàn)目錄樹結(jié)構(gòu)代碼實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關(guān)資料并提供實例代碼,有需要的小伙伴參考下2016-07-07