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 ng-readonly directive returns true.
Syntax:
<element ng-readonly="expression"> Contents... </element>
Example 1: This example uses ng-readonly Directive to enable readonly property.
<!DOCTYPE html><html> <head> <title>ng-readonly Directive</title> <script src= </script> </head> <body ng-app style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-readonly Directive</h2> <div> <label>Check to make month readonly: <input type="checkbox" ng-model="open"></label> <br><br> Input Month:<input ng-readonly="open" type="month" ng-model="month"> </div> </body></html> |
Output:
Before checked the checkbox:
After checked the checkbox:
Example 2: This example uses ng-readonly Directive to enable the readonly property in option list.
<!DOCTYPE html><html> <head> <title>ng-readonly Directive</title> <script src= </script> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-readonly Directive</h2> <div ng-controller="geek"> <div > <button ng-click="edit=true">Edit</button> <button ng-init="edit=false" ng-click="edit=false"> Update </button> </div> <br> <div>Select sorting algorithm</div><br> <div><select class="form-control" ng-disabled="!edit" ng-init="status=1" ng-model="status" ng-options="s.id as s.set for s in set"> </select> </div> </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { $scope.set = [{ id: 1, set: 'Merge sort' }, { id: 2, set: 'Quick sort' }, { id: 3, set: 'Bubble sort' }]; }]); </script> </body></html> |
Output:
Clicking the Edit button:
Clicking the Update button:
.png)