LearnKode

2 Example(s) of Ng-Open


Description :

Checkbox value is bind to open variable with ng-model directive and this value is assigns to ng-open directive which show the particular text based on their value.


Ng-Open Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <label>Check me : <input type="checkbox" ng-model="open"></label><br />
        <details id="details" ng-open="open">
            <summary>{{open==true?'Show':'Hide'}} me</summary>
        </details>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

The main thing about ng-open is write only, so here in below example we will see how we can make ng-open work two way. To achieve this we have to add ng-click on details tag which will update the "open" variable every time user click on details. In this example if you change the selection of checkbox then the value of details will be changed and if user change the selection of details the selection of checkbox will be automatically changed. In the last example of ng-open, it was working as read only means once you change the details tag, it will not update the checkbox selection.


Ng-Open Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LearnKode - Ng-open example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
Check me check multiple: <input type="checkbox" ng-model="open"><br/>
<details id="details" ng-open="open" ng-click="open = !open" >
   <summary>Show/Hide me</summary>
   Details
</details>
  </body>
</html>
Try it » Download Example »

Output