<!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ù)選框取消選中時 DIV 元素將移除。</p>
<p>當(dāng)重新選中復(fù)選框，DIV 元素會重新顯示。</p>

</body>
</html>

定義和用法

ng-if 指令用于在表達(dá)式為 false 時移除 HTML 元素。

如果 if 語句執(zhí)行的結(jié)果為 true，會添加移除元素，并顯示。

ng-if 指令不同于 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素。

語法

所有的 HTML 元素都支持該指令。

參數(shù)值

值	描述
expression	如果表達(dá)式返回 false 則會移除整個元素，如果為 true，則會添加元素。

以上就是對AngularJS基礎(chǔ)知識的整理，后續(xù)繼續(xù)補充，謝謝大家的支持。

您可能感興趣的文章:

相關(guān)文章

解決angularjs WdatePicker ng-model的問題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angular4學(xué)習(xí)筆記router的簡單使用
本篇文章主要介紹了Angular4學(xué)習(xí)筆記router的簡單使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能,涉及AngularJS事件響應(yīng)與數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
AngularJS入門教程中SQL實例詳解
本文主要介紹 AngularJS SQL,這里給大家整理了相關(guān)資料，并提供了實例代碼,有需要的小伙伴可以參考下
2016-07-07
angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法，需要的的朋友參考下
2017-01-01
AngularJs基本特性解析(一)
angularjs是javascript的一個框架，通過script標(biāo)簽添加到網(wǎng)頁中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下
2016-07-07
詳細(xì)AngularJs4的圖片剪裁組件的實例
本篇文章主要介紹了詳細(xì)AngularJs4的圖片剪裁組件的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
AngularJs中route的使用方法和配置
angular是Google開發(fā)的一個單頁面應(yīng)用框架,是現(xiàn)在比較主流的單頁面應(yīng)用框架之一，下面通過本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
詳解在 Angular 項目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項目中添加 clean-blog 模板，非常具有實用價值，需要的朋友可以參考下
2017-07-07
Angular獲取ngIf渲染的Dom元素示例
這篇文章主要為大家介紹了Angular獲取ngIf渲染的Dom元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05