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

Jquery遍历Json数据的方法

Apr 20 Javascript

js实现图片轮播效果

Dec 19 Javascript

jQuery基于cookie实现的购物车实例分析

Dec 24 Javascript

JavaScript实现图片瀑布流和底部刷新

Jan 02 Javascript

JS控件bootstrap suggest plugin使用方法详解

Mar 25 Javascript

Bootstrap输入框组件使用详解

Jun 09 Javascript

浅谈关于axios和session的一些事

Jul 13 Javascript

浅谈微信小程序flex布局基础

Sep 10 Javascript

详解小程序退出页面时清除定时器

Apr 28 Javascript

JQuery事件委托原理与用法实例分析

May 13 jQuery

Vue3 的响应式和以前有什么区别，Proxy 无敌？

May 20 Javascript

原生JavaScript实现轮播图

Jan 10 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

PHP如何利用P3P实现跨域

2013/08/24 PHP

php魔法函数与魔法常量使用介绍

2017/07/23 PHP

设定php简写功能的方法

2019/11/28 PHP

asp javascript 实现关闭窗口时保存数据的办法

2007/11/24 Javascript

使用npm发布Node.JS程序包教程

2015/03/02 Javascript

js实现简单秒表走动的时钟特效

2020/03/25 Javascript

jquery实现图片水平滚动效果代码分享

2015/08/26 Javascript

JQuery datepicker 用法详解

2015/12/25 Javascript

js智能获取浏览器版本UA信息的方法

2016/08/08 Javascript

JavaScript的变量声明提升问题浅析(Hoisting)

2016/11/30 Javascript

angular项目中bootstrap-datetimepicker时间插件的使用示例

2018/03/15 Javascript

JavaScript获取用户所在城市及地理位置

2018/04/21 Javascript

JS中call和apply函数用法实例分析

2018/06/20 Javascript

使用Nuxt.js改造已有项目的方法

2018/08/07 Javascript

微信小程序全局变量功能与用法详解

2019/01/22 Javascript

vue中实现上传文件给后台实例详解

2019/08/22 Javascript

适合前端Vue开发童鞋的跨平台Weex的使用详解

2019/10/16 Javascript

在vue中使用Base64转码的案例

2020/08/07 Javascript

Python引用模块和查找模块路径

2016/03/17 Python

numpy排序与集合运算用法示例

2017/12/15 Python

浅谈Python 递归算法指归

2019/08/22 Python

Python3 虚拟开发环境搭建过程(图文详解)

2020/01/06 Python

Python语法垃圾回收机制原理解析

2020/03/25 Python

详解CSS3阴影 box-shadow的使用和技巧总结

2016/12/03 HTML / CSS

HTML5 canvas基本绘图之绘制曲线

2016/06/27 HTML / CSS

美国第二大团购网站：LivingSocial

2016/07/24 全球购物

英国泽西岛植物：Jersey Plants Direct

2019/08/07 全球购物

eDreams德国：南欧领先的在线旅游公司

2020/12/07 全球购物

经典c++面试题四

2015/05/14 面试题

一名毕业生的自我鉴定

2013/12/04 职场文书

乔布斯斯坦福大学演讲稿

2014/05/23 职场文书

考试作弊被抓检讨书

2014/10/02 职场文书

教育见习报告范文

2014/11/03 职场文书

打架检讨书范文

2015/01/27 职场文书

Python Pandas模块实现数据的统计分析的方法

2021/06/24 Python