CODEWITHSUNDEEP
angularjsangularjs-ng-disabled
Pooja Thapa
Pooja Thapa

Reputation: 143

disable the button after one click using ng-disabled

Below is the code for the ng-click, I want the click event only once and then disable the button. But, how to use ng-disabled for only button tag (without using input tag)?

Suggestion would be really appreciated for the beginner to angularjs.

 <html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Click the button to run a function:</p>
 <button ng-click="!count && myFunc()">OK</button>
 <p>The button has been clicked {{count}} times.</p>
 </div>
 <script>
 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.count = 0;
 $scope.myFunc = function() {
 $scope.count++;
 };
  }]);
  </script>
  </body>
  </html>

Upvotes: 0

Views: 1443

Answers (2)

Rahi.Shah
Rahi.Shah

Reputation: 1313

<script>
 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
 $scope.count = 0;
 $scope.myFunc = function() {
 $scope.count++;
    if($scope.count > 1){
        angular.element('button').addClass('disableButton');
    }
 };
  }]);
  </script>

<style>
.disableButton{
Change color of button to #848d95
}
</style>

Upvotes: 1

rrd
rrd

Reputation: 5977

Have you tried:

<button ng-click="!count && myFunc()" ng-disabled="count > 0">OK</button>

Upvotes: 2

Related Questions