- The ng-open directive in AngularJS specifies the open attribute of a list.
- It is used to sets the open attribute of a details list.
- ng-open directive supported by the <detail> element.
- Whenever the expression inside the ng-open attribute returns true value, then the details list will be visible.
- When we use interpolation inside open then we need special directive to utilize.
- Following browsers like Edge, Firefox, and Internet Explorer will not support, so instead use ngShow or ngHide.
Syntax for ng-open Directive in AngularJS:
|ng-open||string||If the expression returns true value, then the special attribute “open” will be set on the element.|
Sample code for ng-open Directive in AngularJS:
ng-open Directive using in AngularJS:
- The ng-open directive used to set the open attribute of a details list.
Code Explanation for ng-open Directive in AngularJS:
- The ng-app specifies the root element (<div>) to define AngularJS application.
- The ng-model bind an input field value to AngularJS application variable (“detail”).
- <details> tag is mentioned for the additional information to the user they can view or hide.
- The ng-open directive is used to set the open attribute of a “detail”.
- The <summary> tag specifies a visible heading (Show the Tutorial list), which should be clicked to view or hide the details.
Sample Output for ng-open Directive in AngularJS:
- The output is displayed on page load.
- If the user clicks the checkbox, then the output shows the details of the text(“Show the Tutorial List”.)
- If the user unclicks the checkbox, then the output hides the details of the text (“Show the Tutorial List”.)