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

使用Firebug对js进行断点调试的图文方法

Apr 02 Javascript

基于jquery实现的移入页面上空文本框时，让它变为焦点，移出清除焦点

Jul 26 Javascript

javascript学习笔记(七) js函数介绍

Jun 19 Javascript

JS实现模仿微博发布效果实例代码

Dec 16 Javascript

jQuery操作JSON的CRUD用法实例

Feb 25 Javascript

jquery ui resize 中border-box的bug修正

Apr 26 Javascript

原生JS和JQuery动态添加、删除表格行的方法

May 28 Javascript

JavaScript易错知识点整理

Dec 05 Javascript

解析JavaScript实现DDoS攻击原理与保护措施

Dec 26 Javascript

使用vuex缓存数据并优化自己的vuex-cache

May 30 Javascript

JavaScript引用类型Array实例分析

Jul 24 Javascript

Json实现传值到后台代码实例

Jun 30 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

file_get_contents获取不到网页内容的解决方法

2013/03/07 PHP

PHP使用GIFEncoder类生成的GIF动态图片验证码

2014/07/01 PHP

Thinkphp中数据按分类嵌套循环实现方法

2014/10/30 PHP

jquery获取多个checkbox的值异步提交给php的方法

2015/06/24 PHP

PHP设计模式之适配器模式（Adapter）原理与用法详解

2019/12/12 PHP

JS+XML 省份和城市之间的联动实现代码

2009/10/14 Javascript

仿新浪微博登陆邮箱提示效果的js代码

2013/08/02 Javascript

js获取视频时长代码

2014/04/10 Javascript

js实现定时进度条完成后切换图片

2017/01/04 Javascript

JavaScript中无法通过div.style.left获取值的解决方法

2017/02/19 Javascript

Vue实现一个返回顶部backToTop组件

2017/07/25 Javascript

Vue自定义指令使用方法详解

2017/08/21 Javascript

js数组方法reduce经典用法代码分享

2018/01/07 Javascript

详解Vue组件之间通信的七种方式

2019/04/14 Javascript

你不可不知的Vue.js列表渲染详解

2019/10/01 Javascript

vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

2019/11/06 Javascript

Vue组件间的通信pubsub-js实现步骤解析

2020/03/11 Javascript

jQuery 选择器用法实例分析【prev + next】

2020/05/22 jQuery

纯JS实现五子棋游戏

2020/05/28 Javascript

用云开发Cloudbase实现小程序多图片内容安全监测的代码详解

2020/06/07 Javascript

Laravel 如何在blade文件中使用Vue组件的示例代码

2020/06/28 Javascript

JavaScript如何实现监听键盘输入和鼠标监点击

2020/07/20 Javascript

Vue前端判断数据对象是否为空的实例

2020/09/02 Javascript

js获取图片的base64编码并压缩

2020/12/05 Javascript

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

2021/02/26 Vue.js

python实现画圆功能

2018/01/25 Python

python中的字符串内部换行方法

2018/07/19 Python

python之pymysql模块简单应用示例代码

2019/12/16 Python

Django后台管理系统的图文使用教学

2020/01/20 Python

菲律宾优惠券网站：MetroDeal

2019/04/12 全球购物

土耳其风格手工珠宝：Ottoman Hands

2019/07/26 全球购物

计算机开发个人求职信范文

2013/09/26 职场文书

哈理工毕业生的求职信

2013/12/22 职场文书

护理专业自我鉴定

2014/01/30 职场文书

十八大观后感

2015/06/12 职场文书

Golang 遍历二叉树

2022/04/19 Golang