编程 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 相关文章推荐

js调用iframe实现打印页面内容的方法

Mar 04 Javascript

confirm的用法示例用于按钮操作时确定是否执行

Jun 19 Javascript

jQuery 回调函数（callback）的使用和基础

Feb 26 Javascript

js控制网页前进和后退的方法

Jun 08 Javascript

Javascript验证Visa和MasterCard信用卡号的方法

Jul 27 Javascript

Node.js中使用jQuery的做法

Aug 17 Javascript

vue.js学习之递归组件

Dec 13 Javascript

Vue Ajax跨域请求实例详解

Jun 20 Javascript

微信小程序报错：this.setData is not a function的解决办法

Sep 27 Javascript

手把手带你封装一个vue component第三方库

Feb 14 Javascript

解决layui的form里的元素进行动态生成,验证失效的问题

Sep 14 Javascript

threejs太阳光与阴影效果实例代码

Apr 05 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 array_map array_multisort 高效处理多维数组排序

2009/06/11 PHP

PHP教程基本语法

2009/10/23 PHP

ThinkPHP设置禁止百度等搜索引擎转码(简单实用)

2016/02/15 PHP

PHP实现的微信APP支付功能示例【基于TP5框架】

2019/09/16 PHP

PHP 计算两个时间段之间交集的天数示例

2019/10/24 PHP

文字幻灯片

2006/06/26 Javascript

在html页面中包含共享页面的方法

2008/10/24 Javascript

扩展JavaScript功能的正确方法(译文)

2012/04/12 Javascript

Javascript实现动态菜单添加的实例代码

2013/07/05 Javascript

实现前后端数据交互方法汇总

2015/04/07 Javascript

使用Promise解决多层异步调用的简单学习心得

2016/05/17 Javascript

jQuery简单动画变换效果实例分析

2016/07/04 Javascript

Vue.js 2.5新特性介绍(推荐)

2017/10/24 Javascript

angularJS实现动态添加,删除div方法

2018/02/27 Javascript

[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP

2016/03/05 DOTA

[02:53]2018年度DOTA2最佳战队-完美盛典

2018/12/17 DOTA

详细介绍Ruby中的正则表达式

2015/04/10 Python

不管你的Python报什么错，用这个模块就能正常运行

2018/09/14 Python

python实现单链表中删除倒数第K个节点的方法

2018/09/28 Python

Python中logging.NullHandler 的使用教程

2018/11/29 Python

WxPython建立批量录入框窗口

2019/02/27 Python

python框架flask表单实现详解

2019/11/04 Python

Holiday Inn中国官网：IHG旗下假日酒店预订

2018/04/08 全球购物

阿拉伯书店：Jamalon

2019/07/24 全球购物

生物医学工程专业学生求职信范文分享

2013/12/14 职场文书

拖鞋店创业计划书

2014/01/15 职场文书

简历上的自我评价

2014/02/03 职场文书

出纳员岗位职责

2014/03/13 职场文书

1亿有多大教学反思

2014/05/01 职场文书

物流管理专业自荐信

2014/06/23 职场文书

园林技术专业求职信

2014/07/28 职场文书

镇班子对照检查材料思想汇报

2014/09/24 职场文书

民事诉讼代理授权委托书

2014/10/11 职场文书

详解Nginx启动失败的几种错误处理

2021/04/01 Servers

比较node.js和Deno

2021/04/27 Javascript

http通过StreamingHttpResponse完成连续的数据传输长链接方式

2022/02/12 Python