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

Prototype使用指南之hash.js

Jan 10 Javascript

JavaScript Konami Code 实现代码

Jul 29 Javascript

jquery ui bootstrap 实现自定义风格

Nov 14 Javascript

很实用的js选项卡切换效果

Aug 12 Javascript

微信js-sdk地理位置接口用法示例

Oct 12 Javascript

基于JavaScript实现复选框的全选和取消全选

Feb 09 Javascript

BOM之navigator对象和用户代理检测

Feb 10 Javascript

Vue.js如何优雅的进行form validation

Apr 07 Javascript

浅谈Angularjs中不同类型的双向数据绑定

Jul 16 Javascript

vue项目每30秒刷新1次接口的实现方法

Dec 04 Javascript

微信小程序实现图片滚动效果示例

Dec 05 Javascript

微信小程序音乐播放器开发

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

用文本文件制作留言板提示（下）

2006/10/09 PHP

gd库图片下载类实现下载网页所有图片的php代码

2012/08/20 PHP

深入理解php的MySQL连接类

2013/06/07 PHP

详解PHP的Yii框架中日志的相关配置及使用

2015/12/08 PHP

php ActiveMQ的安装与使用方法图文教程

2020/02/23 PHP

纯JavaScript实现的完美渐变弹出层效果代码

2010/04/02 Javascript

JS检测输入字符是否包含非法字符的示例代码

2014/02/11 Javascript

Javascript遍历table中的元素示例代码

2014/07/08 Javascript

js实现飞入星星特效代码

2014/10/17 Javascript

JavaScript基本的输出和嵌入式写法教程

2015/10/20 Javascript

JavaScript计划任务后台运行的方法

2015/12/18 Javascript

JavaScript获取当前url根目录(路径)

2016/06/17 Javascript

js常用DOM方法详解

2017/02/04 Javascript

js面向对象编程总结

2017/02/16 Javascript

详解webpack 如何集成第三方js库

2017/06/29 Javascript

使用yeoman构建angular应用的方法

2017/08/14 Javascript

Vue DevTools调试工具的使用

2017/12/05 Javascript

Vue 中的受控与非受控组件的实现

2018/12/17 Javascript

vue-router实现嵌套路由的讲解

2019/01/19 Javascript

spring+angular实现导出excel的实现代码

2019/02/27 Javascript

vue限制输入框只能输入8位整数和2位小数的代码

2019/11/06 Javascript

python使用PIL缩放网络图片并保存的方法

2015/04/24 Python

shell命令行,一键创建 python 模板文件脚本方法

2018/03/20 Python

python 用for循环实现1~n求和的实例

2019/02/01 Python

Python logging设置和logger解析

2019/08/28 Python

Python 如何创建一个简单的REST接口

2020/07/30 Python

Python pysnmp使用方法及代码实例

2020/08/24 Python

Pytorch之扩充tensor的操作

2021/03/04 Python

HTML5 Canvas——用路径描画线条实例介绍

2013/06/09 HTML / CSS

Johnson Fitness澳大利亚：高级健身器材

2021/03/16 全球购物

老兵退伍标语

2014/10/07 职场文书

公司更名通知函

2015/04/24 职场文书

二手手机买卖合同范本（2019年版）

2019/10/28 职场文书

python基于机器学习预测股票交易信号

2021/05/25 Python

简单介绍Python的第三方库yaml

2021/06/18 Python

SQL SERVER触发器详解

2022/02/24 SQL Server