Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用

這篇文章主要為大家展示了“Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular.JS中指令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

使用方式比前前兩個復(fù)雜一點，不過也非常直觀，類似原生js 中的switch 函數(shù)：

在外層父級元素設(shè)置 ng-switch 為一個表達式A ，那么他的子元素相當(dāng)于幾個不同的選項，表達式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 并不是很妥當(dāng)，路過的朋友，有了解的可以指點我一下！

以上是“Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！