AngularJS ng-open 指令
2016-11-09 18:22
453 查看
ng-open 指令用于设置 details 列表的 open 属性。
如果 ng-open 的表达式返回 true 则 details 列表是可见的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.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 的表达式返回 true 则 details 列表是可见的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS ng-app 指令实例详解
- AngularJS ng-change 指令的详解及简单实例
- angular.js指令中transclude选项及ng-transclude指令详解
- Angular.js中上传指令ng-upload的基本使用教程
- AngularJS ng-bind 指令简单实现
- AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
- angularjs ng-options指令 默认选择 玩法
- AngularJs ng-change事件/指令(转)
- AngularJS ng-bind-template 指令详解
- AngularJS ng-model 指令
- AngularJS ng-mousedown 指令
- Angular.JS中指令ng-if的注意事项小结
- AngularJS ng-model 指令
- AngularJS ng-blur 指令详解及简单实例
- AngularJs ng-change事件/指令
- AngularJS ngModel实现指令与输入直接的数据通信
- AngularJS ng-style 指令
- AngularJS ng-repeat指令及Ajax的应用实例分析
- Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
- AngularJs ng-bind-html指令整理