javascriptangularjsangularjs-directiveangularjs-scope

Why is ng-disabled not working on button?

My Plunkr: http://plnkr.co/edit/4MkenJPczFbxy5aoillL?p=preview

enter image description here

<body ng-controller="mainCtrl as main">

<h1>Hello Plunker!</h1>
<p>Button should not be disabled:</p>

<div ng-init="main.btnDisabled = false">
    <button ng-model="main.my_button"
         ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
         disabled="main.btnDisabled"
         type="button"
         class="btn btn-info btn-sm switch-btn">My Button</button>  
</div>

Angular

angular.module('app').controller('mainCtrl', function($scope) {
  vm = this;
  vm.btnDisabled = false;
});

I found this answer here, but it didn't work in my example.

Solution

  • The button is disabled because there is disabled attribute. This is enough for browser to know that element must be inactive. The value for disabled attribute doesn't matter, it can be anything.

    This is exactly the reason why Angular provides ngDisabled directive, which adds disabled attibute when expression evaluates to true, and removes when it's false.

    In your case you should use

    <button ng-model="main.my_button"
        ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
        ng-disabled="main.btnDisabled"
        type="button"
        class="btn btn-info btn-sm switch-btn">My Button</button>