AngularJS Basic ng open Simple Example

2021-07-07 06:12:07
OfStack

AngularJS ng-open Directive

AngularJS instance

Show or hide by clicking checkbox < details > List:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

 Click here to display  details  List : <input type="checkbox" ng-model="showDetails"><br>
<br>

<details ng-open="showDetails">
 <summary> Learn not only technology, but also dreams! </summary>
 <p> -  Rookie tutorial </p>
</details>

<p><b> Note: </b>  At present, only  Opera, Chrome,  And  Safari  Browser support  details  Label. </p>

</body>
</html>

Definition and usage

The ng-open directives set the open property of the details list.

The details list is visible if the expression for ng-open returns true.

Grammar

< details ng-open="expression" > ... < /details >

< details > Element supports this directive.

Parameter value

值	描述
expression	如果表达式为 true 则会设置 details 的 open 属性。

The above is the data collation of AngularJS ng-open instruction, which will be supplemented in the future.