CODEWITHSUNDEEP
javascriptangularjs
Ivan Beseda
Ivan Beseda

Reputation: 23

Disabling ng-click on this element

I have three buttons in one controller with ng-click functions. How I can disable click when this element is already clicked? Here is example:

<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
  </div>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.IsClickEnable = true;
  $scope.DoSomethingElse = function() {
    alert('click')
    $scope.IsClickEnable = false;
  };

}]);

Upvotes: 2

Views: 4720

Answers (4)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

A better way to do this is by writing a custom directive that updates the DOM element using jqLite or jQuery (in-case the jQuery library is loaded). Check the below code snippet.

The DOM shouldn't be updated in the Controller because it inhibits unit testing and DOM manipulations should happen in the directive, to justify in this scenario as the buttons are created in the view itself and not generated using the data in the Controller.

angular
  .module('demo', [])
  .controller('GreetingController', GreetingController)
  .directive('disableOnClick', disableOnClick);

GreetingController.$inject = ['$scope'];

function GreetingController($scope) {
  $scope.doSomethingElse = function() {
    console.log('do something else');
  }
}

function disableOnClick() {
  var directive = {
    restrict: 'A',
    link: linkFunc
  }

  return directive;

  function linkFunc(scope, element, attrs, ngModelCtrl) {
    element.on('click', function(event) {
      event.target.disabled = true;
    });
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="GreetingController">
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
  </div>
</div>

Upvotes: 1

Weedoze
Weedoze

Reputation: 13953

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope',
  function($scope) {

    $scope.buttons = [{
      "name": "xyz",
      "disabled": false
    }, {
      "name": "xyz",
      "disabled": false
    }, {
      "name": "xyz",
      "disabled": false
    }];

    $scope.DoSomethingElse = function(b) {
      console.log("Do something");
      b.disabled = true;
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-repeat="button in buttons" 
            ng-disabled="button.disabled" 
            ng-click="DoSomethingElse(button)">
      {{button.name}}
    </button>
  </div>
</div>

Upvotes: 2

Rambler
Rambler

Reputation: 5500

Just add nd-disable directive to your buttons :

 <button ng-click="clicked=true;DoSomethingElse()" ng-disabled-"clicked">xyz</button>

A javascript independent solution.This way you need not care about setting the flag in your controller.Just add clicked=false at the init of your controller.

Upvotes: 1

kolodi
kolodi

Reputation: 1062

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.DoSomethingElse = function(event) {
    event.target.disabled = true;
  };

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-click="DoSomethingElse($event)">xyz</button>
    <button ng-click="DoSomethingElse($event)">xyz</button>
    <button ng-click="DoSomethingElse($event)">xyz</button>
  </div>
</div>

Upvotes: -1

Related Questions