Many times, in development, we have to make controls dynamically, that are readonly at client-side. Today, we will learn how to make such readonly controls in AngularJS.

For making controls readonly, Angular has ng-readonly directive.

In this example, we have a form. In that form, we have textbox and two buttons, Edit and Update. Once a user clicks on Edit, user can enter text. Once they click on Update, all textbox will become readonly. Look at the below example.


Script.js
  1. var testApp = angular
  2. .module("testModule", [])
  3. .controller("testController", function($scope) {
  4. $scope.makeReadOnly = true;
  5. $scope.update_Click = function() {
  6. $scope.makeReadOnly = true;
  7. }
  8. $scope.edit_Click = function() {
  9. $scope.makeReadOnly = false;
  10. }
  11. });
In the above code, we have makeReadOnly variable. When a page loads, its value is assigned to true. That means, all controls will be readonly. If user clicks on edit button, value is assigned to false and all textbox controls become writable. Main thing here is that ng-readonly works on the basis of true and false.

Index.html
  1. <html ng-app="testModule">
  3. <head>
  4. <title></title>
  5. <script src="scripts/angular.min.js"></script>
  6. <script src="scripts/js/script.js"></script>
  7. </head>
  9. <body>
  10. <div ng-controller="testController">
  11. <table>
  12. <tr>
  13. <td>Name</td>
  14. <td><input type="text" id="txtName" ng-model="testViewModel.name" ng-readonly="makeReadOnly" /></td>
  15. </tr>
  16. <tr>
  17. <td>
  18. Father's Name</td>
  19. <td><input type="text" id="txtfName" ng-model="testViewModel.fName" ng-readonly="makeReadOnly" /></td>
  20. </tr>
  21. <tr>
  22. <td>
  23. Address</td>
  24. <td><input type="text" id="txtAddress" ng-model="testViewModel.address" ng-readonly="makeReadOnly" /></td>
  25. </tr>
  26. <tr>
  27. <td>
  28. Phone</td>
  29. <td><input type="text" id="txtPhone" ng-model="testViewModel.phone" ng-readonly="makeReadOnly" /></td>
  30. </tr>
  31. <tr>
  32. <td>
  33. <input type="button" id="btnUpdate" ng-click="update_Click()" value="Update" />
  34. </td>
  35. <td>
  36. <input type="button" id="btnEdit" ng-click="edit_Click()" value="Edit" />
  37. </tr>
  38. </table>
  39. </div>
  40. </body>
  42. </html>
You can see in the above code, I use ng-readonly = “makeReadOnly”. That means, if makeReadOnly value becomes true, all related controls work as readonly; if false, users can insert data.

makeReadOnly

The above image shows if the user clicks on edit, user can enter data.

makeReadOnly

Above image shows, if user clicks on update, textbox becomes readonly because ng-readonly value is now true.

ng-readonly Definition

ng-readonly directive is specially designed for making controls readonly. It works if the ng-readonly value is true. If you want to remove readonly feature, make it false.