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>

it('should toggle open', function() {
  expect(element(by.id('details')).getAttribute('open')).toBeFalsy();
  element(by.model('open')).click();
  expect(element(by.id('details')).getAttribute('open')).toBeTruthy();
});