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

用Javascript实现UTF8编码转换成gb2312编码

Dec 22 Javascript

js实例属性和原型属性示例详解

Nov 23 Javascript

浅谈javascript中的instanceof和typeof

Feb 27 Javascript

Bootstrap carousel轮转图的使用实例详解

May 17 Javascript

AngularJS教程之简单应用程序示例

Aug 16 Javascript

js实现小窗口拖拽效果

Dec 03 Javascript

关于Vue实现组件信息的缓存问题

Aug 23 Javascript

详解用Node.js写一个简单的命令行工具

Mar 01 Javascript

解决一个微信号同时支持多个环境网页授权问题

Aug 07 Javascript

vue中使用[provide/inject]实现页面reload的方法

Sep 30 Javascript

vue 验证两次输入的密码是否一致的方法示例

Sep 29 Javascript

解决vue watch数据的方法被调用了两次的问题

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

Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划！

2020/03/06 日漫

杏林同学录(六)

2006/10/09 PHP

浅谈php中变量的数据类型判断函数

2017/03/04 PHP

JavaScript 选中文字并响应获取的实现代码

2011/08/28 Javascript

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

2011/11/21 Javascript

js 限制数字 js限制输入实现代码

2012/12/04 Javascript

JS中表单的使用小结

2014/01/11 Javascript

什么是MEAN?JavaScript编程中的MEAN是什么意思？

2014/12/18 Javascript

原生javascript实现分享到朋友圈功能支持ios和android

2016/05/11 Javascript

最常见的左侧分类菜单栏jQuery实现代码

2016/11/28 Javascript

微信小程序canvas写字板效果及实例

2017/06/15 Javascript

jQuery查找和过滤_动力节点节点Java学院整理

2017/07/04 jQuery

jQuery中使用validate插件校验表单功能

2019/05/24 jQuery

Vue发布项目实例讲解

2019/07/17 Javascript

[02:12]打造更好的电竞完美世界：完美盛典回顾篇

2018/12/19 DOTA

python修改注册表终止360进程实例

2014/10/13 Python

python的类方法和静态方法

2014/12/13 Python

socket + select 完成伪并发操作的实例

2017/08/15 Python

对Python中plt的画图函数详解

2018/11/07 Python

详解用python自制微信机器人，定时发送天气预报

2019/03/25 Python

简单了解python关系（比较）运算符

2019/07/08 Python

python PyAutoGUI 模拟鼠标键盘操作和截屏功能

2019/08/04 Python

Python 迭代，for...in遍历，迭代原理与应用示例

2019/10/12 Python

win10下python2和python3共存问题解决方法

2019/12/23 Python

HTML5 拖拽批量上传文件的示例代码

2018/03/28 HTML / CSS

阿迪达斯意大利在线商店：adidas意大利

2016/09/19 全球购物

国外平面设计素材网站：The Hungry JPEG

2017/03/28 全球购物

Melissa鞋马来西亚官方网站：MDreams马来西亚

2018/04/05 全球购物

美国马匹用品和马钉购物网站：State Line Tack

2018/08/05 全球购物

英国在线自行车店：Merlin Cycles

2018/08/20 全球购物

大学教师年终总结的自我评价

2013/10/29 职场文书

优乐美广告词

2014/03/14 职场文书

党员个人总结范文

2015/02/14 职场文书

湘江北去观后感

2015/06/15 职场文书

小学思品教学反思

2016/02/20 职场文书

pd.DataFrame中的几种索引变换的实现

2022/06/16 Python