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=
"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>