ng-if / ng-show/ng-hide ng-swith
ng-show/ng-hide
在用原生js 或者 jquery的時候,我們一般都可以定義一個類,通過添加和刪除這個類來實現元素的顯示和隱藏切換。其實這部分從網上參考資料來看,Angular也是這樣實現的,根據表達式正確與否,動態添加或者刪除 ng-hide 這個Angualr預先定義好的class。調用方式具體如下:
可以是設置一個變量
<div ng-show=‘show‘></div>
也可以是直接使用 true / false
<div ng-show=‘true‘></div>
對於變量,我們在js 中直接設置這個值就可以。
這個指令的特性是,即使我們暫時隱藏這部分內容,它也會被dom 渲染。
ng-if
使用方式也是設置一個表達式:
可以是設置一個變量
<div ng-if=‘more‘></div>
也可以是直接使用 true / false
<div ng-if=‘true‘></div>
對於變量,我們在js 中直接設置這個值就可以。
這是一個能幫我們節省效率的指令,如果表達式值 === false , 則這部分不會在dom中渲染,或者原有的內容會被從dom中刪除。所以如果有一部分內容,不需要一開始就顯示,我們可以先用ng-if 讓它隱藏。例如一個顯示更多的下拉按鈕,剛開始不顯示的部分,可以ng-if 來設置,等我們點擊了更多按鈕,再設置ng-if = true 既可。這樣子減少了頁面渲染事件,提高了效率呢。
ng-swith
使用方式比前前兩個復雜一點,不過也非常直觀,類似原生js 中的switch 函數:
在外層父級元素設置 ng-switch 為一個表達式A ,那麽他的子元素相當於幾個不同的選項,表達式A 對應哪個子元素的 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>
這也是一個能幫我們節省效率的指令。和ng-if 一樣,一開始如果不等於父級的 ng-switch 表達式的值,則不會在頁面渲染的,而且我們也可以通過 ng-switch-default 來設置默認的顯示部分。比如以往常見的 Tab 選項卡,用這個指令實現起來就非常的容易。
ng-if / ng-show/ng-hide ng-swith