AngularJS Tutorial - ng-disabled








Use ng-disabled to bind the disabled attribute to form input fields:

  • text input
  • number input
  • url input
  • email input
  • checkbox
  • radio
  • submit
  • textarea
  • select
  • button




Example

The following code disable the button until the user enters text into the text field:


<!--  www  . java 2  s .  c  o  m-->


<!doctype html>
<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
  <input type="text" ng-model="isDisabled" placeholder="Type to Enable">
  <button ng-model="button" ng-disabled="!isDisabled">A Button</button>
</body>
</html>

The following code disable the text field for five seconds 
until the isDisabled property becomes true inside the $timeout:

<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by auser 

Released under the MIT license: http://jsbin.mit-license.org
The code is revised from http://jsbin.com/iHiYItu/1/edit.
-->

<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
  <textarea ng-disabled="isDisabled">Wait 1 second</textarea>

  <script>
    // JS for demo 2:
    angular.module('myApp', [])
    .run(function($rootScope, $timeout) {
      $rootScope.isDisabled = true;
      $timeout(function() {
        $rootScope.isDisabled = false;
      }, 1000);
    });
  </script>

</body>
</html>

The code above is rendered as follows: