AngularJS ng-open Directive
Last Updated :
03 Aug, 2022
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 =
</ 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 =
</ 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:
Share your thoughts in the comments
Please Login to comment...