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: