AngularJS基礎(chǔ) ng-if 指令用法
更新時(shí)間：2016年08月01日 15:43:56 投稿：lqh
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實(shí)例代碼,有需要的同學(xué)可以參考下
AngularJS ng-if 指令
AngularJS 實(shí)例
取消選中，并移除內(nèi)容:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true"> <div ng-if="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> <hr> </div> <p>當(dāng)復(fù)選框取消選中時(shí) DIV 元素將移除。</p> <p>當(dāng)重新選中復(fù)選框，DIV 元素會重新顯示。</p> </body> </html>
定義和用法
ng-if 指令用于在表達(dá)式為 false 時(shí)移除 HTML 元素。
如果 if 語句執(zhí)行的結(jié)果為 true，會添加移除元素，并顯示。
ng-if 指令不同于 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素。
語法
<element ng-if="expression"></element>
所有的 HTML 元素都支持該指令。
參數(shù)值
| 值 | 描述 |
|---|---|
| expression | 如果表達(dá)式返回 false 則會移除整個元素，如果為 true，則會添加元素。 |
以上就是對AngularJS基礎(chǔ)知識的整理，后續(xù)繼續(xù)補(bǔ)充，謝謝大家的支持。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于angular共享依賴解決方案的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
詳解如何構(gòu)建Angular項(xiàng)目目錄結(jié)構(gòu)
本篇文章主要介紹了詳解如何構(gòu)建Angular項(xiàng)目目錄結(jié)構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
angularjs實(shí)現(xiàn)上拉加載和下拉刷新數(shù)據(jù)功能
本篇文章主要介紹了angularjs實(shí)現(xiàn)上拉加載和下拉刷新數(shù)據(jù)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了Angular動態(tài)組件，對此感興趣的同學(xué)，可以親自實(shí)驗(yàn)一下。2021-05-05
Angular.JS中的指令引用template與指令當(dāng)做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了angular2中Http請求原理與用法,結(jié)合實(shí)例形式分析了AngularJS中http相關(guān)模塊實(shí)現(xiàn)http服務(wù)請求與相應(yīng)的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngualrJS中每次$http請求時(shí)的一個遮罩層Directive
AngularJS是一款非常強(qiáng)大的前端MVC框架。接下來通過本文給大家介紹AngualrJS中每次$http請求時(shí)的一個遮罩層Directive，本文非常具有參考借鑒價(jià)值，特此分享供大家學(xué)習(xí)2016-01-01
Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)
這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問題小結(jié),需要的朋友可以參考下2017-09-09
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。2017-04-04