AngularJS基础 ng-if 指令用法
更新时间：2016年08月01日 15:43:56 投稿：lqh
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下
AngularJS ng-if 指令
AngularJS 实例
取消选中，并移除内容:
<!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>当复选框取消选中时 DIV 元素将移除。</p> <p>当重新选中复选框，DIV 元素会重新显示。</p> </body> </html>
定义和用法
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。
语法
<element ng-if="expression"></element>
所有的 HTML 元素都支持该指令。
参数值
| 值 | 描述 |
|---|---|
| expression | 如果表达式返回 false 则会移除整个元素，如果为 true，则会添加元素。 |
以上就是对AngularJS基础知识的整理，后续继续补充，谢谢大家的支持。
相关文章
这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本篇文章主要介绍了详解如何构建Angular项目目录结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍了Angular动态组件，对此感兴趣的同学，可以亲自实验一下。2021-05-05
Angular.JS中的指令引用template与指令当做属性详解
这篇文章主要介绍了Angular.JS中的指令引用template与指令当做属性的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了angular2中Http请求原理与用法,结合实例形式分析了AngularJS中http相关模块实现http服务请求与相应的相关操作技巧,需要的朋友可以参考下2018-01-01
今天小编就为大家分享一篇angular 未登录状态拦截路由跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
AngualrJS中每次$http请求时的一个遮罩层Directive
AngularJS是一款非常强大的前端MVC框架。接下来通过本文给大家介绍AngualrJS中每次$http请求时的一个遮罩层Directive，本文非常具有参考借鉴价值，特此分享供大家学习2016-01-01
Angular中封装fancyBox(图片预览)遇到问题小结
这篇文章主要介绍了Angular中封装fancyBox(图片预览)遇到的问题小结,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了angularjs指令之绑定策略（@、=、&）,AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令外部的作用域进行数据绑定。2017-04-04
最新评论