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

繁简字转换功能

Jul 19 Javascript

javascript动态添加、修改、删除对象的属性与方法详解

Jan 27 Javascript

jQuery插件MixItUp实现动画过滤和排序

Apr 12 Javascript

原生js制作简单的数字键盘

Apr 24 Javascript

JS实现图片的不间断连续滚动的简单实例

Jun 03 Javascript

多功能jQuery树插件zTree实现权限列表简单实例

Jul 12 Javascript

浅析BootStrap Treeview的简单使用

Oct 12 Javascript

微信小程序 wxapp内容组件 progress详细介绍

Oct 31 Javascript

javascript学习之json入门

Dec 22 Javascript

Zepto实现密码的隐藏/显示

Apr 07 Javascript

require.js中的define函数详解

Jul 10 Javascript

Vue 实现列表动态添加和删除的两种方法小结

Sep 07 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 SPL使用方法和他的威力

2013/11/12 PHP

不用MOUSEMOVE也能滑动啊

2007/05/23 Javascript

加载jQuery后$冲突的解决办法

2010/07/09 Javascript

禁止ajax缓存获取程序最新数据的方法

2013/11/19 Javascript

js实现宇宙星空背景效果的方法

2015/03/03 Javascript

js实现touch移动触屏滑动事件

2015/04/17 Javascript

jquery实现二级导航下拉菜单效果

2015/12/18 Javascript

node.js实现爬虫教程

2020/08/25 Javascript

JavaScript易错知识点整理

2016/12/05 Javascript

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

2016/12/14 Javascript

javascript工厂模式和构造函数模式创建对象方法解析

2016/12/30 Javascript

JavaScript实现数组降维详解

2017/01/05 Javascript

jQuery实现table中两列CheckBox只能选中一个的示例

2017/09/22 jQuery

关于 angularJS的一些用法

2017/11/29 Javascript

JS将时间秒转换成天小时分钟秒的字符串

2019/07/10 Javascript

webpack HappyPack实战详解

2019/10/08 Javascript

vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

2020/05/28 Javascript

openlayers实现地图弹窗

2020/09/25 Javascript

如何在vue中使用百度地图添加自定义覆盖物（水波纹）

2020/11/03 Javascript

[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛胜者组赛BO3 第一场

2019/08/22 DOTA

python实现批量解析邮件并下载附件

2018/06/19 Python

解决win64 Python下安装PIL出错问题(图解)

2018/09/03 Python

Django rest framework jwt的使用方法详解

2019/08/08 Python

关于PyTorch 自动求导机制详解

2019/08/18 Python

Python函数式编程实例详解

2020/01/17 Python

Python几种常见算法汇总

2020/06/02 Python

pyMySQL SQL语句传参问题,单个参数或多个参数说明

2020/06/06 Python

matplotlib subplot绘制多个子图的方法示例

2020/07/28 Python

HTML5 canvas基本绘图之绘制线段

2016/06/27 HTML / CSS

俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店：INTERMODA

2020/07/17 全球购物

计算机专业毕业生推荐信

2013/11/25 职场文书

婚礼主持词

2014/03/13 职场文书

土地转让协议书范本

2014/04/15 职场文书

房屋产权共有协议书范本

2014/11/03 职场文书

5.12护士节活动总结

2015/02/10 职场文书

MySQL查询日期时间

2022/05/15 MySQL