Skip to content
Related Articles

Related Articles

AngularJS ng-open Directive

Improve Article
Save Article
  • Last Updated : 03 Aug, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!