编程 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、CSS以及img对DOMContentLoaded事件的影响

Aug 12 Javascript

js操作cookie保存浏览记录的方法

Dec 25 Javascript

JS三级可折叠菜单实现方法

Feb 29 Javascript

JS中用try catch对代码运行的性能影响分析

Dec 26 Javascript

对称加密与非对称加密优缺点详解

Feb 06 Javascript

angularJS开发注意事项

May 26 Javascript

js canvas画布实现高斯模糊效果

Nov 27 Javascript

详解Vue.js v-for不支持IE9的解决方法

Dec 29 Javascript

vue项目打包之后背景样式丢失的解决方案

Jan 17 Javascript

vue前后分离调起微信支付

Jul 29 Javascript

微信小程序列表时间戳转换实现过程解析

Oct 12 Javascript

vue实现计步器功能

Nov 01 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

推荐一些非常不错的javascript学习资源站点

2007/08/29 Javascript

JS 文件大小判断的实现代码

2010/04/07 Javascript

js将控件隐藏的方法及display属性介绍

2013/07/04 Javascript

javascript中自定义对象的属性方法分享

2013/07/12 Javascript

Jquery validation remote 验证的缓存问题解决方法

2014/03/25 Javascript

jQuery实现购物车表单自动结算效果实例

2015/08/10 Javascript

使用控制台破解百小度一个月只准改一次名字

2015/08/13 Javascript

js中不同的height, top的区别对比

2015/09/24 Javascript

简单谈谈JS数组中的indexOf方法

2016/10/13 Javascript

AngularJS实现使用路由切换视图的方法

2017/01/24 Javascript

Bootstrap Table使用整理(五)之分页组合查询

2017/06/09 Javascript

vuejs 单文件组件.vue 文件的使用

2017/07/28 Javascript

JavaScript中Hoisting详解 (变量提升与函数声明提升)

2017/08/18 Javascript

微信小程序数据统计和错误统计的实现方法

2019/06/26 Javascript

[03:39]DOTA2英雄梦之声_第05期_幽鬼

2014/06/23 DOTA

[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式

2019/12/19 DOTA

网红编程语言Python将纳入高考你怎么看?

2018/06/07 Python

对python多线程与global变量详解

2018/11/09 Python

Python实现的在特定目录下导入模块功能分析

2019/02/11 Python

K最近邻算法(KNN)---sklearn+python实现方式

2020/02/24 Python

Python random库使用方法及异常处理方案

2020/03/02 Python

Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)

2020/03/19 Python

Python中SQLite如何使用

2020/05/27 Python

pytorch 网络参数 weight bias 初始化详解

2020/06/24 Python

Python用来做Web开发的优势有哪些

2020/08/05 Python

html5基础标签(html5视频标签 html5新标签用法)

2013/12/30 HTML / CSS

html5小技巧之通过document.head获取head元素

2014/06/04 HTML / CSS

Currentbody澳大利亚：美容仪专家

2019/11/11 全球购物

《我的伯父鲁迅先生》教学反思

2014/02/12 职场文书

《只有一个地球》教学反思

2014/02/14 职场文书

党的群众路线教育实践活动心得体会

2014/03/03 职场文书

公共场所禁烟标语

2014/06/25 职场文书

授权委托书范本（单位）

2014/09/28 职场文书

公务员党的群众路线教育实践活动学习心得体会

2014/10/30 职场文书

2014年民警工作总结

2014/11/25 职场文书

浅析Python中的随机采样和概率分布

2021/12/06 Python