编程 Javascript

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 中移除元素。

语法

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

参数值

值	描述
expression	如果表达式返回 false 则会移除整个元素，如果为 true，则会添加元素。

以上就是对AngularJS基础知识的整理，后续继续补充，谢谢大家的支持。

AngularJS基础 ng-if 指令用法

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript基本语法分析说明

Jun 15 Javascript

谈谈JavaScript中的函数与闭包

Apr 14 Javascript

文件编码导致jquery失效的解决方法

Jun 26 Javascript

JavaScript实现继承的4种方法总结

Oct 16 Javascript

JQUERY简单按钮轮换选中效果实现方法

May 07 Javascript

对象转换为原始值的实现方法

Jun 06 Javascript

分享十三个最佳JavaScript数据网格库

Apr 07 Javascript

Weex开发之地图篇的具体使用

Oct 16 Javascript

React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

Jan 06 Javascript

mpvue实现微信小程序快递单号查询代码

Apr 03 Javascript

js编写简易的计算器

Jul 29 Javascript

jQuery ajax - getScript() 方法和getJSON方法

May 14 jQuery

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通过curl添加cookie伪造登陆抓取数据的方法

2016/04/02 PHP

PHP互换两个变量值的方法(不用第三变量)

2016/11/14 PHP

laravel框架中控制器的创建和使用方法分析

2019/11/23 PHP

用js来获取上传的文件名纯粹是为了美化而用

2013/10/23 Javascript

JavaScript利用append添加元素报错的解决方法

2014/07/01 Javascript

innerHTML动态添加html代码和脚本兼容多个浏览器

2014/10/11 Javascript

JS实现仿新浪微博发布内容为空时提示功能代码

2015/08/19 Javascript

js实现带缓冲效果的仿QQ面板折叠菜单代码

2015/09/06 Javascript

浅谈Nodejs观察者模式

2015/10/13 NodeJs

原生js实现查询天气小应用

2016/12/09 Javascript

nodeJS服务器的创建和重新启动的实现方法

2018/05/12 NodeJs

Auto.js自动收取自己和好友蚂蚁森林能量脚本

2018/06/28 Javascript

vue组件中的样式属性scoped实例详解

2018/10/30 Javascript

nodejs二进制与Buffer的介绍与使用

2019/07/11 NodeJs

详谈vue中router-link和传统a链接的区别

2020/07/22 Javascript

Vue自定义多选组件使用详解

2020/09/08 Javascript

IDEA配置jQuery, $符号不再显示黄色波浪线的问题

2020/10/09 jQuery

[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6

2018/06/07 DOTA

Python多进程并发(multiprocessing)用法实例详解

2015/06/02 Python

Python多维/嵌套字典数据无限遍历的实现

2016/11/04 Python

python 实现在txt指定行追加文本的方法

2018/04/29 Python

Python延时操作实现方法示例

2018/08/14 Python

Python 仅获取响应头, 不获取实体的实例

2019/08/21 Python

Python 内置变量和函数的查看及说明介绍

2019/12/25 Python

Python 解析库json及jsonpath pickle的实现

2020/08/17 Python

pycharm中选中一个单词替换所有重复单词的实现方法

2020/11/17 Python

Marc Jacobs彩妆官网：Marc Jacobs Beauty

2017/07/03 全球购物

Chain Reaction Cycles芬兰：世界上最大的在线自行车商店

2017/12/06 全球购物

使用索引(Index)有哪些需要考虑的因素

2016/10/19 面试题

毕业生的自我评价范文

2013/12/31 职场文书

幼儿园英语教学反思

2014/01/30 职场文书

公安纪律作风整顿剖析材料

2014/10/10 职场文书

2015年公司新年寄语

2014/12/08 职场文书

2015年税务稽查工作总结

2015/05/26 职场文书

一文搞懂Redis中String数据类型

2022/04/03 Redis

HTML静态页面获取url参数和UserAgent的实现

2022/08/05 HTML / CSS