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:
Contents...
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>
<head>
<title>ng-open Directivetitle>
<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">GeeksforGeeksh1>
<h2>ng-open Directiveh2>
<details id="details" ng-open="open">
<summary>
Click to view sorting algorithms:
summary>
<summary>Merge sortsummary>
<summary>Quick sortsummary>
<summary>Bubble sortsummary>
details>
body>
html>
Output:
Example: This example describes the ng-open directive in AngularJS.
<html>
<head>
<title>ng-open Directivetitle>
<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>GeeksforGeeksh1>
<h3>ng-open Directiveh3> List of Data Structures
<input type="checkbox" ng-model="open" />
<br />
<details id="details" ng-open="open">
<summary>Viewsummary>
<ol class="middle">
<li>Linked Listli>
<li>Stackli>
<li>Queueli>
<li>Treeli>
<li>Graphli>
ol>
details>
body>
html>
Output:
