编程 Javascript

AngularJS基础 ng-open 指令简单实例

Posted in Javascript onAugust 02, 2016

AngularJS ng-open 指令

AngularJS 实例

通过点击 checkbox 显示或隐藏 <details> 列表:

<!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="">

点击这里显示 details 列表: <input type="checkbox" ng-model="showDetails"><br>
<br>

<details ng-open="showDetails">
 <summary>学的不仅是技术，更是梦想！</summary>
 <p> - 菜鸟教程</p>
</details>

<p><b>注意：</b> 目前只有 Opera, Chrome, 和 Safari 浏览器支持 details 标签。</p>

</body>
</html>

定义和用法

ng-open 指令用于设置 details 列表的 open 属性。

如果 ng-open 的表达式返回 true 则 details 列表是可见的。

语法

<details> 元素支持该指令。

参数值

值	描述
expression	如果表达式为 true 则会设置 details 的 open 属性。

以上就是对AngularJS ng-open 指令的资料整理，后续继续补充。

AngularJS基础 ng-open 指令简单实例

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS运行耗时操作的延时显示方法

Nov 19 Javascript

javascript 判断中文字符长度的函数代码

Aug 27 Javascript

jquery操作 iframe的方法

Dec 03 Javascript

基于jQuery的JavaScript模版引擎JsRender使用指南

Dec 29 Javascript

JS采用绝对定位实现回到顶部效果完整实例

Jun 20 Javascript

JS仿京东移动端手指拨动切换轮播图效果

Apr 10 Javascript

Vue.extend构造器的详解

Jul 17 Javascript

使用vue + less 实现简单换肤功能的示例

Feb 21 Javascript

p5.js入门教程之平滑过渡(Easing)

Mar 16 Javascript

详解swipe使用及竖屏页面滚动方法

Jun 28 Javascript

Node爬取大批量文件的方法示例

Jun 28 Javascript

JavaScript实现队列结构过程

Dec 06 Javascript

AngularJS基础 ng-non-bindable 指令详细介绍

Aug 02 #Javascript

实例详解jQuery的无new构建

Aug 02 #Javascript

AngularJS基础 ng-mouseover 指令简单示例

Aug 02 #Javascript

JavaScript比较当前时间是否在指定时间段内的方法

Aug 02 #Javascript

图文详解JavaScript的原型对象及原型链

Aug 02 #Javascript

AngularJS基础 ng-mousemove 指令简单示例

Aug 02 #Javascript

功能强大的Bootstrap使用手册（一）

Aug 02 #Javascript

You might like

php 随机数的产生、页面跳转、件读写、文件重命名、switch语句

2009/08/07 PHP

php检测useragent版本示例

2014/03/24 PHP

php制作动态随机验证码

2015/02/12 PHP

阿里云PHP SMS短信服务验证码发送方法

2017/07/11 PHP

Laravel validate error处理,ajax,json示例

2019/10/25 PHP

js 点击按钮弹出另一页，选择值后，返回到当前页

2010/05/26 Javascript

jquery ajax 调用失败的原因示例介绍

2013/09/27 Javascript

完美解决AJAX跨域问题

2013/11/01 Javascript

《JavaScript高级编程》学习笔记之object和array引用类型

2015/11/01 Javascript

Bootstrap零基础入门教程(三)

2016/07/18 Javascript

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

2017/05/17 Javascript

浅谈vue实现数据监听的函数 Object.defineProperty

2017/06/08 Javascript

jQuery复合事件用法示例

2017/06/10 jQuery

详解Angular之constructor和ngOnInit差异及适用场景

2017/06/22 Javascript

React/Redux应用使用Async/Await的方法

2017/11/16 Javascript

15分钟深入了解JS继承分类、原理与用法

2019/01/19 Javascript

基于vue的验证码组件的示例代码

2019/01/22 Javascript

使用JavaScript解析URL的方法示例

2019/03/01 Javascript

js+cavans实现图片滑块验证

2020/09/29 Javascript

Python使用pymongo模块操作MongoDB的方法示例

2018/07/20 Python

如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱

2019/11/19 Python

PyTorch中Tensor的数据统计示例

2020/02/17 Python

python实现根据给定坐标点生成多边形mask的例子

2020/02/18 Python

python图形界面开发之wxPython树控件使用方法详解

2020/02/24 Python

如何教少儿学习Python编程

2020/07/10 Python

如何使用Django Admin管理后台导入CSV

2020/11/06 Python

BONIA波尼亚新加坡官网：皮革手袋，鞋类和配件

2016/08/25 全球购物

现代绅士日常奢侈品：Todd Snyder

2019/12/13 全球购物

金融专业求职信

2014/08/05 职场文书

孝敬父母的活动方案

2014/08/31 职场文书

亮剑精神观后感

2015/06/05 职场文书

欠条样本

2015/07/03 职场文书

婚礼长辈答谢词

2015/09/29 职场文书

2016年助残日旅游活动总结

2016/04/01 职场文书

html实现弹窗的实例

2021/06/09 HTML / CSS

Spring boot应用启动后首次访问很慢的解决方案

2021/06/23 Java/Android