AngularJS ng-open 指令

  • 定义和用法

    ng-open 设置详细信息列表的 open 属性。
    如果 ng-open 属性中的表达式返回 true,则详细信息列表将可见。
  • 语法

    <details ng-open="expression">...</details>
    
    仅由<details>元素支持该指令
  • 参数

    参数 必需的 描述
    expression 一个表达式,如果元素返回true,它将设置元素的open属性。
  • 示例

    下例演示了通过单击一个复选框显示/隐藏<details>列表:
    <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="UTF-8">
     <title>欢迎来到蝴蝶教程</title>
     <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
     </head>
     <body ng-app="">
          单击此处以显示详细信息列表的内容: <input type="checkbox" ng-model="showDetails"><br>
          <br>
          <details ng-open="showDetails">
             <summary>Copyright 2018-2019.</summary>
             <p> -由蝴蝶教程提供版权所有</p>
          </details>
          <p><b>注意:</b>目前仅在Opera,Chrome和Safari中支持details标签。</p>
     </body>
     </html>
    
    尝试一下