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

使用jquery实现简单的ajax

Jul 08 Javascript

jQuery自动切换/点击切换选项卡效果的小例子

Aug 12 Javascript

浅谈JavaScript数据类型

Mar 03 Javascript

多个jQuery版本共存的处理方案

Mar 17 Javascript

js实现精确到毫秒的倒计时效果

Aug 05 Javascript

JS实现自动阅读单词(有道单词本添加功能)

Nov 14 Javascript

JS正则子匹配实例分析

Dec 22 Javascript

AngularJS表单基本操作

Jan 09 Javascript

bootstrap中模态框、模态框的属性实例详解

Feb 17 Javascript

微信小程序picker组件简单用法示例【附demo源码下载】

Dec 05 Javascript

Vue实现类似Spring官网图片滑动效果方法

Mar 01 Javascript

JavaScript中AOP的实现与应用

May 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

PHP4和PHP5性能测试和对比测试代码与环境

2007/08/17 PHP

php抓取页面与代码解析推荐

2010/07/23 PHP

yii框架通过控制台命令创建定时任务示例

2014/04/30 PHP

PHP文件上传判断file是否己选择上传文件的方法

2014/11/10 PHP

PHP使用mysqldump命令导出数据库

2015/04/14 PHP

PHP简单计算两个时间差的方法示例

2017/06/20 PHP

Django 中 cookie的使用

2017/08/17 PHP

javascript cookie解码函数（兼容ff）

2008/03/17 Javascript

EXTjs4.0的store的findRecord的BUG演示代码

2013/06/08 Javascript

CSS+jQuery实现的一个放大缩小动画效果

2013/09/24 Javascript

JavaScript对HTML DOM使用EventListener进行操作

2015/10/21 Javascript

JavaScript 不支持 indexof 该如何解决

2016/03/30 Javascript

Node.js websocket使用socket.io库实现实时聊天室

2017/02/20 Javascript

vue.js实现刷新当前页面的方法教程

2017/07/05 Javascript

如何使node也支持从url加载一个module详解

2018/06/05 Javascript

Vue.js的复用组件开发流程完整记录

2018/11/29 Javascript

[01:34]2016国际邀请赛中国区预选赛IG战队教练采访

2016/06/27 DOTA

跟老齐学Python之集合(set)

2014/09/24 Python

通过实例浅析Python对比C语言的编程思想差异

2015/08/30 Python

Python端口扫描简单程序

2016/11/10 Python

python实现读取并显示图片的两种方法

2017/01/13 Python

Python Django框架实现应用添加logging日志操作示例

2019/05/17 Python

python opencv 读取图片返回图片某像素点的b,g,r值的实现方法

2019/07/03 Python

Python3 实现减少可调用对象的参数个数

2019/12/20 Python

python中count函数简单用法

2020/01/05 Python

pytorch-神经网络拟合曲线实例

2020/01/15 Python

Pytorch .pth权重文件的使用解析

2020/02/14 Python

详解Python中的文件操作

2021/01/14 Python

美国最值得信赖的宠物药房：Allivet

2019/03/23 全球购物

园艺师求职信

2014/04/27 职场文书

班级活动总结格式

2014/08/30 职场文书

工资收入证明

2014/10/07 职场文书

2015年大学生村官工作总结

2015/04/21 职场文书

资深HR教你写好简历中的自我评价

2019/05/07 职场文书

my.ini优化mysql数据库性能的十个参数(推荐)

2021/05/26 MySQL

MySQL空间数据存储及函数

2021/09/25 MySQL