AngularJS ng-open Directive Last Updated : 03 Aug, 2022 Summarize Suggest changes Share Like Article Like Report The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> Parameter: expression: If the expression returns true then it will be used to set the open attribute for the element.Example: This example uses the ng-open Directive to open the attribute of an element. HTML <!DOCTYPE html> <html> <head> <title>ng-open Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="" style="text-align: center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-open Directive</h2> <details id="details" ng-open="open"> <summary> Click to view sorting algorithms: </summary> <summary>Merge sort</summary> <summary>Quick sort</summary> <summary>Bubble sort</summary> </details> </body> </html> Output: Example: This example describes the ng-open directive in AngularJS. HTML <!DOCTYPE html> <html> <head> <title>ng-open Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style> .middle { text-align: center; list-style-position: inside; list-style-type: none; } body { text-align: center; } h1 { color: green; } </style> </head> <body ng-app=""> <h1>GeeksforGeeks</h1> <h3>ng-open Directive</h3> List of Data Structures <input type="checkbox" ng-model="open" /> <br /> <details id="details" ng-open="open"> <summary>View</summary> <ol class="middle"> <li>Linked List</li> <li>Stack</li> <li>Queue</li> <li>Tree</li> <li>Graph</li> </ol> </details> </body> </html> Output: Advertise with us Next Article AngularJS ng-options Directive V Vishal Chaudhary 2 Follow Similar Reads AngularJS ng-options Directive The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill t 2 min read AngularJS ng-pattern Directive The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-patter 2 min read AngularJS ng-show Directive The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> C 2 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-style Directive The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep 2 min read Article Tags : Web Technologies AngularJS AngularJS-Directives Like