编程 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 全面解析各种浏览器网页中的JS 执行顺序

Feb 17 Javascript

如何让div span等元素能响应键盘事件操作指南

Nov 13 Javascript

jQuery实现的图片分组切换焦点图插件

Jan 06 Javascript

JS实现在网页中弹出一个输入框的方法

Mar 03 Javascript

JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

Apr 05 Javascript

thinkjs之页面跳转同步异步操作

Feb 05 Javascript

bootstrap suggest搜索建议插件使用详解

Mar 25 Javascript

JS实现简单的天数计算器完整实例

Apr 28 Javascript

微信小程序自定义toast实现方法详解【附demo源码下载】

Nov 28 Javascript

解决webpack无法通过IP地址访问localhost的问题

Feb 22 Javascript

如何获取vue单文件自身源码路径

May 06 Javascript

JavaScript 浏览器对象模型BOM原理与常见用法实例分析

Dec 16 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

弄了个检测传输的参数是否为数字的Function

2006/12/06 PHP

php max_execution_time执行时间问题

2011/07/17 PHP

基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)

2014/01/31 PHP

PHP @ at 记号的作用示例介绍

2014/10/10 PHP

php中JSON的使用与转换

2015/01/14 PHP

php微信浏览器分享设置以及回调详解

2016/08/01 PHP

PHP创建单例后台进程的方法示例

2017/05/23 PHP

DEFER怎么用？

2006/07/01 Javascript

JQuery实现展开关闭层的方法

2015/02/17 Javascript

Perl Substr()函数及函数的应用

2015/12/16 Javascript

Angularjs CURD 详解及实例代码

2016/09/14 Javascript

Javascript数组中push方法用法分析

2016/10/31 Javascript

解决vue里碰到 $refs 的问题的方法

2017/07/13 Javascript

Angular弹出模态框的两种方式

2017/10/19 Javascript

Angular中支持SCSS的方法

2017/11/18 Javascript

原生js+cookie实现购物车功能的方法分析

2017/12/21 Javascript

详解.vue文件中style标签的几个标识符

2018/07/17 Javascript

Vue项目全局配置页面缓存之按需读取缓存的实现详解

2018/08/01 Javascript

详解html-webpack-plugin插件(用法总结)

2018/09/12 Javascript

解决vuex刷新状态初始化的方法实现

2019/08/15 Javascript

js实现窗口全屏示例详解

2019/09/17 Javascript

python微信公众号开发简单流程

2018/03/23 Python

python ftp 按目录结构上传下载的实现代码

2018/09/12 Python

Python使用type关键字创建类步骤详解

2019/07/23 Python

TensorFlow查看输入节点和输出节点名称方式

2020/01/04 Python

python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例

2020/03/06 Python

美国一家主营日韩美妆护肤品的在线商店：iMomoko

2016/09/11 全球购物

Photobook澳大利亚：制作相片书，婚礼卡，旅行相簿

2017/01/12 全球购物

生日寿宴答谢词

2014/01/19 职场文书

创业大赛策划书

2014/03/01 职场文书

人事科岗位职责范本

2014/03/02 职场文书

促销活动总结

2014/04/28 职场文书

求职信格式要求

2014/05/23 职场文书

小石潭记导游词

2015/02/03 职场文书

python获取对象信息的实例详解

2021/07/07 Python

OpenCV 图像梯度的实现方法

2021/07/25 Python