开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >angularJS学习之路（九）---ng-if

angularJS学习之路（九）---ng-if

wust小吴

发布于 2019-07-08 08:37:48

发布于 2019-07-08 08:37:48

46800

代码可运行

举报

文章被收录于专栏：风吹杨柳风吹杨柳

运行总次数：0

代码可运行

ng-if 指令可以根据表示的结果在DOM中生成或者移除一个元素而且是完全移除不是隐藏或者显示

而且需要注意的是：当重新被插入的时候，元素的状态是原始状态而不是上次移除时的状态

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-if="2 + 2 === 5">
			Won't see this DOM node, not even in the source code
		</div>

		<div ng-if="2 + 2 === 4">
			Hi, I do exist
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module("myApp", []);
		</script>
	</body>

</html>

运行结果就是：

Hi, I do exist

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015年11月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

angularJS的DOM操作

dom 函数集合事件 angularjs

AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs是不建议和JQuery同时使用的，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite

全栈若城

2024/02/29

1100

angularJS学习之路（三十）---自定义指令---templateUrl

不过这里因为js目录是当前的目录，你的html目录肯定在另外一个文件夹里，所以自己记得路径的问题

wust小吴

2019/07/08

5520

AngularJS 模块

angularjs html 编程算法 javascript 容器

你可以通过 AngularJS 的 angular.module 函数来创建模块：

陈不成i

2021/07/23

1.9K0

angularJS学习之路（四）---作用域（1）

面向对象编程 angularjs

这里提到的“作用域”的概念，是一个在范围上与 DOM 结构一致，数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手：

wust小吴

2019/07/08

3170

angularJS学习之路（二）---模块

模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script t

wust小吴

2019/07/08

2840

angularJS学习之路（三）---控制器

angularjs javascript 编程算法

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

wust小吴

2019/07/08

6350

angularjs学习第六天笔记（指令简介学习）

　　您好，由于周末有事情，没哟学习angularjs，几天晚上开始继续学习angularjs,坚持加油每一天。谢谢

小小许

2018/08/30

5450

angularjs学习第六天笔记（指令简介学习）

angularJS学习之路（二十一）---injector---初探依赖注入

html raft title 浏览器

这个例子运行效果就是浏览器一打开就会弹出 StarCraft 当你点击确定之后，页面的元素才开始从 {{title}}变成 StarCraft

wust小吴

2019/07/08

4740

angularjs学习第一天笔记

编程算法 angularjs

　　　　您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

小小许

2018/08/30

2.2K0

angularjs学习第一天笔记

angularJS学习之路（十一）---ng-show和ng-hide

ng-show 和 ng-hide 根据表达式的值来显示或者隐藏HTML元素 ng-show false 被隐藏 ng-hide true 被隐藏 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-show="2 + 2 === 5">2 + 2 isn't 5, don't show</div> <div n

wust小吴

2019/07/08

7960

angularJS学习之路（十九）---自定义指令关于独立作用域

scope 作用域

1.首先关于 scope：{} 和scope：true 效果是一样的 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-init="myProperty = 'wow, this is cool'"></div> Surrounding scope: {{ myProperty }} <div myInherit

wust小吴

2019/07/08

4640

angularJS学习之路（五）---表达式

编程算法 angularjs html

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

wust小吴

2019/07/08

6310

angularJS学习之路（六）---指令

一个东西需要说明：根据HTML标准，布尔属性代表一个true或者false值，当这个属性出现的时候，这个属性的值就是true，无论实际值是什么，如果未出现，这个属性的值就是false

wust小吴

2019/07/08

1.7K0

AngularJS系列之常用指令

这节给大家介绍一下AngularJS中一些常用的指令，例如：ng-app、ng-init、ng-repeat、ng-model等等之类的指令。那什么是AngularJS的指令呢，其实就是相当于HTM

林老师带你学编程

2018/01/03

2.1K0

AngularJS API之bootstrap启动

对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/

用户1154259

2018/01/17

6880

angularJS学习之路（二十九）---控制器的别名使用和它的作用域的确定

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css" /> </head> <body> <div ng-controller="RoomController as room"> <div class="btn-defaul

wust小吴

2019/07/08

4850

Angularjs基础(六)

AngularJS HTML DOM 　　　　AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令　　　　ng-disabled指令直接绑定应用数据到HTML的disabled属性。　　　　　　实例：　　　　　　<div ng-app="" ng-init="mySwitch=true"> 　　　　　　　　<p> 　　　　　　　　　　<button ng-disableled="mySwitch">点我！</button

用户1197315

2018/01/19

3K0

angularJS学习之路（七）---子控制器关于是引用机制还是复制机制的问题---原型继承

html 面向对象编程

原型继承要弄清一点：修改父级对象中的alue值会同时修改子对象中的alue值，但是反过来就不行了，

wust小吴

2019/07/08

5100

【AngularJS】—— 12 独立作用域

前面通过视频学习了解了指令的概念，这里学习一下指令中的作用域的相关内容。通过独立作用域的不同绑定，可以实现更具适应性的自定义标签。借由不同的绑定规则绑定属性，从而定义出符合更多应用场景的标签。本篇将会总结下面的内容：　　1 为何需要独立作用域　　2 如何实现独立作用域　　3 作用域的数据绑定之前有一些错误，是由于replace拼写错误导致的。拼写正确后，网友发现报错，无法正常工作。这是因为模板中存在单标签<br>，导致模板无法正确解析~ 再次感谢博友们提出的错误！独立作

用户1154259

2018/01/17

1.4K0

【AngularJS】—— 12 独立作用域

AngularJS入门心得3——HTML的左右手指令

数据处理 angularjs html

　　在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生，弥补了HTML的天然缺陷，用于构件Web应用等。” 　　那么AngularJS如何弥补HTML的缺陷，指令可能是最好的回答。指令是什么？？？指令就是一些附加在HTML元素上的自定义标记（可以是属性A、元素E、css类

JackieZheng

2018/01/16

3.2K0

AngularJS入门心得3——HTML的左右手指令

相关推荐

angularJS的DOM操作

更多 >

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验