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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
js获取url传值的方法
Dec 18 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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高手?学会“懒惰”的编程
2006/12/05 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP5函数小全(分享)
2013/06/06 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python模块restful使用方法实例
2013/12/10 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python shutil模块用法实例分析
2019/10/02 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python类如何定义私有变量
2020/02/03 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
关键字final的用法
2013/10/02 面试题
最新大学生自我评价
2013/09/24 职场文书
自我评价怎么写正确呢?
2013/12/02 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
爱的承诺书
2015/01/20 职场文书