AngularJS ng-open Directive

The AngularJS ng-open directive sets the open attribute of a detailed list. This detailed list is visible if the expression inside the ng-open in true. A special directive is required because interpolation cannot be used inside the open attribute.

It is supported by the <details>element.

Syntax:

Parameter explanation:

expression: It specifies an expression that will set the element's open attribute if it returns true.

Let's take an example to demonstrate the sage of ng-open directive.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Click here to show the content of the details list: <input type="checkbox" ng-model="showDetails"><br>
<br>
<details ng-open="showDetails">
  <summary>Copyright 2011-2016.</summary>
  <p> - by JavaTpoint. All Rights Reserved.</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and Safari.</p>
</body>
</html>

Test it Now

Next TopicAngularJS ng-options Directive

← prev next →