AngularJS ng-readonly Directive Last Updated : 01 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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 the ng-readonly directive returns true. The ng-readonly directive is required to change the value between true and false. In case, if the readonly attribute is set to false, then the presence of the readonly attribute makes the element readonly, irrespective of its value.Syntax:<element ng-readonly="expression"> Contents... </element>Parameter:expression: It returns true if the expression sets the element's readonly attribute.This directive is supported by <input>, <textarea> elements.Example 1: This example uses ng-readonly Directive to enable readonly property. HTML <!DOCTYPE html> <html> <head> <title>ng-readonly Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </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:Example 2: This example uses the ng-readonly Directive to enable the readonly property in option list. HTML <!DOCTYPE html> <html> <head> <title>ng-readonly Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </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> let 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: Comment More infoAdvertise with us Next Article AngularJS ng-readonly Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-required Directive The ng-required Directive in AngularJS is used to specify the required attribute of an HTML element. The input field in the form is required only if the expression inside the ng-required directive returns true. It is supported by <input>, <select> and <textarea> tags. Syntax: <e 2 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-show Directive The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> C 2 min read Like