编程 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 仿QQ校友的DIV模拟窗口效果源码

Mar 24 Javascript

浅析document.createDocumentFragment()与js效率

Jul 08 Javascript

60个很实用的jQuery代码开发技巧收集

Dec 15 Javascript

移动端使用localStorage缓存Js和css文的方法(web开发)

Sep 20 Javascript

vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

Mar 13 Javascript

ReactNative实现图片上传功能的示例代码

Jul 11 Javascript

浅谈Webpack 持久化缓存实践

Mar 22 Javascript

Vuex新手的理解与使用详解

May 31 Javascript

js实现图片粘贴到网页

Dec 06 Javascript

Element图表初始大小及窗口自适应实现

Jul 10 Javascript

js实现批量删除功能

Aug 27 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实现导出excel数据的类库用法示例

2016/10/15 PHP

php实现银联商务公众号+服务窗支付的示例代码

2019/10/12 PHP

Mootools 1.2教程(3) 数组使用简介

2009/09/14 Javascript

JQuery入门——事件切换之toggle()方法应用介绍

2013/02/05 Javascript

js使用eval解析json实例与注意事项分享

2014/01/18 Javascript

javascript中的事件代理初探

2014/03/08 Javascript

js正则表达式中exec用法实例

2015/07/23 Javascript

深入解读JavaScript中的Hoisting机制

2015/08/12 Javascript

JavaScript基本语法_动力节点Java学院整理

2017/06/26 Javascript

JavaScript编程设计模式之构造器模式实例分析

2017/10/25 Javascript

Vue.js 十五分钟入门图文教程

2018/09/12 Javascript

Vue组件教程之Toast(Vue.extend 方式)详解

2019/01/27 Javascript

JS中的算法与数据结构之队列(Queue)实例详解

2019/08/20 Javascript

Electron整合React使用搭建开发环境的步骤详解

2020/06/07 Javascript

vue离开当前页面触发的函数代码

2020/09/01 Javascript

微信小程序：报错(in promise) MiniProgramError

2020/10/30 Javascript

[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity

2018/08/13 DOTA

python实现排序算法

2014/02/14 Python

Python复制目录结构脚本代码分享

2015/03/06 Python

详解Python中dict与set的使用

2015/08/10 Python

Python cookbook（数据结构与算法）字典相关计算问题示例

2018/02/18 Python

Django shell调试models输出的SQL语句方法

2019/08/29 Python

Python 元组拆包示例(Tuple Unpacking)

2019/12/24 Python

通过实例学习Python Excel操作

2020/01/06 Python

Django缓存Cache使用详解

2020/11/30 Python

自动化专业职业生涯规划书范文

2014/01/16 职场文书

2014三八妇女节活动总结

2014/03/01 职场文书

对公司合理化的建议书

2014/03/12 职场文书

第一批党的群众路线教育实践活动总结报告

2014/07/03 职场文书

银行求职信模板

2015/03/20 职场文书

小学英语听课心得体会

2016/01/14 职场文书

关于做家务的心得体会

2016/01/23 职场文书

分家协议书范本

2016/03/22 职场文书

2016年乡镇七一建党节活动总结

2016/04/05 职场文书

商业计划书如何写？关键问题有哪些？

2019/07/11 职场文书

SpringMVC 整合SSM框架详解

2021/08/30 Java/Android