Angularjs Examples

AJS Examples


AngularJS ng-open Directive

The AngularJS ng-open directive is used to set the open attribute on the DOM element, if the expression inside ng-open is true.

Syntax

 <label>Show All Instructions: 
 <input type="checkbox" ng-model="open"></label><br/>
<details id="details" ng-open="open"> 

AngularJS ng-open Directive Example

<!DOCTYPE html>      
<html>      
<head> <!-- www.techstrikers.com -->      
<title>ngOpen Test Sample</title>   
      
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>      
  
</head>      
<body style="background-color:#DDE4E9;" ng-app="">      
  <fieldset style="background-color:#DDE4E9;">        
    <legend>AngulerJS ngOpen Example</legend>  

 <label>Show All Instructions: <input type="checkbox" ng-model="open"></label><br/>
<details id="details" ng-open="open">
   <summary>Instructions:</summary>
   Instructions1<br>
   Instructions2<br>
   Instructions3<br>
</details>
    
<p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"     
        ng-show='open'>Showing Instructions</p>  
      
 </fieldset>       
</body>      
</html>   
See Live Example