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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
Three.js基础部分学习
Jan 08 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
浅谈React之状态(State)
Sep 19 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
js表达式与运算符简单操作示例
Feb 15 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
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
客户端静态页面玩分页
2006/06/26 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python如何获取系统iops示例代码
2016/09/06 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python之py2exe打包工具详解
2017/06/14 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
一看就懂得Python的math模块
2018/10/21 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python如何安装下载后的模块
2020/07/03 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
护士自荐信范文
2013/12/15 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS