AngularJS基础 ng-if 指令用法


Posted in Javascript onAugust 01, 2016

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基础知识的整理,后续继续补充,谢谢大家的支持。

Javascript 相关文章推荐
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 #Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 #Javascript
AngularJS基础 ng-href 指令用法
Aug 01 #Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 #Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 #Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 #Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 #Javascript
You might like
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
js获取视频时长代码
2014/04/10 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python实现画圆功能
2018/01/25 Python
python中的字符串内部换行方法
2018/07/19 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
护理专业自我鉴定
2014/01/30 职场文书
十八大观后感
2015/06/12 职场文书
Golang 遍历二叉树
2022/04/19 Golang