Prevent ng-click = "" effect when button is disabled

Question

How can I prevent AngularJS from clicking on an HTML button tag that has a disabled attribute?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled ng-click="something()">No Click Please!</button>

Run codeHide result

In this case, something () should not be called.

Answer 1

You pass in an expression that must be evaluated in the directive ngClick. If it is not evaluated true, then something()it will not be called.

Here is an example:

(function() {

  angular.module('MyApp', [])
    .controller('MyController', MyController);

  MyController.$inject = ["$scope"];

  function MyController($scope) {

    $scope.disabled = true;

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="MyApp">

  <div data-ng-controller="MyController">

    <button type="button" ng-disabled="disabled" ng-click="disabled && something()">No Click Please!</button>

    <button type="button" data-ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button>

  </div>

</div>

Run codeHide result

Please note that you can also use the directive ngDisabledso that, if $scope.disabledtrue, something()it will not be called, and the button will also be disabled!

Answer 2

- ng-disabled, angular ,

HTML:

 <button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">No Click Please!</button>

JS:

    $scope.isDisabled = false;
    $scope.disableClick = function() {
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    }

papakia, , .

DEMO APP

Answer 3

AngularJS , disabled / Bootstrap .disabled, .

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled="disabled" data-ng-click="something($event)">No Click Please!</button>

JavaScript

function something( $event )
{
    var is_enabled = !angular.element( $event.currentTarget ).is( '.disabled,:disabled' );
    if( is_enabled )
    {
    }
}

Answer 4

ng-disabled.

<md-button ng-disabled="true"> Disabled Button </md-button>

...