Show / Hide Table of Contents
Close
Loading …
There was an error loading this resource. Please try again later.
 Improve this Doc  View Source

ngOpen

  1. - directive in module ng

Overview

Sets the open attribute on the element, if the expression inside ngOpen is truthy.

A special directive is necessary because we cannot use interpolation inside the open attribute. See the interpolation guide for more info.

A note about browser compatibility

Internet Explorer and Edge do not support the details element, it is recommended to use ngShow and ngHide instead.

Directive Info

  • This directive executes at priority level 100.

Usage

  • as attribute:
    <DETAILS
      ng-open="expression">
    ...
    </DETAILS>

Arguments

Param Type Details
ngOpen expression

If the expression is truthy, then special attribute "open" will be set on the element

Example

<label>Toggle details: <input type="checkbox" ng-model="open"></label><br/>
<details id="details" ng-open="open">
   <summary>List</summary>
   <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Durian</li>
   </ul>
</details>