编程 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 XML操作封装类

Jul 01 Javascript

ExtJS[Desktop]实现图标换行示例代码

Nov 17 Javascript

关于jQuery判断元素是否存在的问题示例探讨

Jul 21 Javascript

jQuery性能优化技巧分析

Feb 20 Javascript

JS实现可点击展开与关闭的左侧广告代码

Sep 02 Javascript

Javascript BOM学习小结(六)

Nov 26 Javascript

使用jQuery UI库开发Web界面的简单入门指引

Apr 22 Javascript

利用JS提交表单的几种方法和验证(必看篇)

Sep 17 Javascript

Node.js测试中的Mock文件系统详解

Nov 21 Javascript

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

Mar 06 Javascript

Angular Renderer (渲染器)的具体使用

May 03 Javascript

微信小程序保存图片到相册权限设置

Apr 09 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共享内存段示例分享

2014/01/20 PHP

php读取大文件示例分享(文件操作类)

2014/04/13 PHP

PHP实现网页内容html标签补全和过滤的方法小结【2种方法】

2017/04/27 PHP

JavaScript原型继承之基础机制分析

2011/08/26 Javascript

TextArea不支持maxlength的解决办法(jquery)

2011/09/13 Javascript

用JavaScript修改CSS属性的代码

2013/05/06 Javascript

JQuery 获取json数据$.getJSON方法的实例代码

2013/08/02 Javascript

Jquery 跨域访问 Lightswitch OData Service的方法

2013/09/11 Javascript

JavaScript立即执行函数的三种不同写法

2014/09/05 Javascript

Nodejs极简入门教程（三）：进程

2014/10/27 NodeJs

Bootstrap中data-target 到底是什么

2017/02/14 Javascript

微信小程序 Nginx环境配置详细介绍

2017/02/14 Javascript

jQuery中on方法使用注意事项详解

2017/02/15 Javascript

微信小程序使用navigateTo数据传递的实例

2017/09/26 Javascript

React Native 使用Fetch发送网络请求的示例代码

2017/12/02 Javascript

Vue动态生成el-checkbox点击无法赋值的解决方法

2019/02/21 Javascript

Vue中全局变量的定义和使用

2019/06/05 Javascript

Vue中axios拦截器如何单独配置token

2019/12/27 Javascript

[08:02]DOTA2牵红线 zhou神抱得美人归

2014/03/22 DOTA

[03:16]DOTA2完美大师赛主赛事首日集锦

2017/11/23 DOTA

一个可以套路别人的python小程序实例代码

2019/04/09 Python

如何基于python测量代码运行时间

2019/12/25 Python

Python爬取12306车次信息代码详解

2020/08/12 Python

Keds加拿大官网：购买帆布运动鞋和皮鞋

2019/09/26 全球购物

拉夫劳伦爱尔兰官方网站：Ralph Lauren爱尔兰

2020/04/10 全球购物

别名指示符是什么

2012/10/08 面试题

系统管理员的职责包括那些？管理的对象是什么？

2013/01/18 面试题

公司财务工作总结的自我评价

2013/11/23 职场文书

实习生自我鉴定范文

2013/12/05 职场文书

教师自我鉴定

2013/12/13 职场文书

11月红领巾广播稿

2014/01/17 职场文书

师德个人剖析材料

2014/02/02 职场文书

邮政竞聘演讲稿

2014/09/03 职场文书

常务副总经理岗位职责

2015/02/02 职场文书

导游词400字

2015/02/13 职场文书

2015年七夕情人节感言

2015/08/03 职场文书