AngularJS ng-pattern Directive

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>

Output:

AngularJS ng-pattern Directive

V

Vishal Chaudhary 2

Improve

Article Tags :

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

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

AngularJS ng-paste Directive

The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and

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

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

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>

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

AngularJS ng-readonly Directive

The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside the ng-readonly directive returns true. The ng-readonly directive is required to change the value between true and false. In case, if t

AngularJS ng-srcset Directive

The ng-srcset Directive in AngularJS is used to specify the srcset attribute of an <img> element, ie, overriding the original srcset attribute of an <img> element. It helps to ensure that the wrong image is not produced until AngularJS has been evaluated. This directive must be used inst

AngularJS ng-init Directive

The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression"