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

设置下载不需要倒计时cookie(倒计时代码)

Nov 19 Javascript

JS在textarea光标处插入文本的小例子

Mar 22 Javascript

基于JavaScript实现定时跳转到指定页面

Jan 01 Javascript

Three.js基础部分学习

Jan 08 Javascript

js上下视差滚动简单实现代码

Mar 07 Javascript

json的结构与遍历方法实例分析

Apr 25 Javascript

JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

Jul 28 Javascript

浅谈React之状态(State)

Sep 19 Javascript

浅谈JS中几种轻松处理'this'指向方式

Sep 16 Javascript

vue实现侧边栏导航效果

Oct 21 Javascript

JavaScript 浏览器对象模型BOM原理与常见用法实例分析

Dec 16 Javascript

js表达式与运算符简单操作示例

Feb 15 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一些常用的正则表达式字符的一些转换

2008/07/29 PHP

php中apc缓存使用示例

2013/12/25 PHP

PHP集成百度Ueditor 1.4.3

2014/11/23 PHP

ThinkPHP中where()使用方法详解

2016/04/19 PHP

解决php-fpm.service not found问题的办法

2017/06/06 PHP

利用laravel+ajax实现文件上传功能方法示例

2017/08/13 PHP

客户端静态页面玩分页

2006/06/26 Javascript

js 对联广告、漂浮广告封装类（IE,FF,Opera,Safari,Chrome

2009/11/26 Javascript

Jquery 高亮显示文本中重要的关键字

2009/12/24 Javascript

浅谈Jquery为元素绑定事件

2015/04/27 Javascript

jquery 点击元素后,滚动条滚动至该元素位置的方法

2016/08/05 Javascript

JavaScript lodash常见用法系列小结

2016/08/24 Javascript

微信小程序动态绑定数据及动态事件处理

2017/03/14 Javascript

微信小程序商城项目之商品属性分类（4）

2017/04/17 Javascript

Vue.js实现输入框绑定的实例代码

2017/08/24 Javascript

使用JSON格式提交数据到服务端的实例代码

2018/04/01 Javascript

详解通过源码解析Node.js中cluster模块的主要功能实现

2018/05/16 Javascript

Vue自定义toast组件的实例代码

2018/08/15 Javascript

vue组件是如何解析及渲染的？

2021/01/13 Vue.js

[40:19]2018完美盛典CS.GO表演赛

2018/12/17 DOTA

Python如何获取系统iops示例代码

2016/09/06 Python

一步步教你用Python实现2048小游戏

2017/01/19 Python

Python之py2exe打包工具详解

2017/06/14 Python

磁盘垃圾文件清理器python代码实现

2020/08/24 Python

一看就懂得Python的math模块

2018/10/21 Python

pycharm创建一个python包方法图解

2019/04/10 Python

Python中的pathlib.Path为什么不继承str详解

2019/06/23 Python

Django 多表关联存储使用方法详解 ManyToManyField save

2019/08/09 Python

python如何安装下载后的模块

2020/07/03 Python

美国美食礼品篮网站：Gourmet Gift Baskets

2019/12/15 全球购物

手工制作的意大利皮革运动鞋：KOIO

2020/01/05 全球购物

护士自荐信范文

2013/12/15 职场文书

初中高效课堂实施方案

2014/02/26 职场文书

少先队入队仪式主持词

2015/07/04 职场文书

幼儿园师德师风心得体会

2016/01/12 职场文书

el-form每行显示两列底部按钮居中效果的实现

2022/08/05 HTML / CSS