Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 400
Leon Gaban Avatar asked Nov 04 '25 07:11

Leon Gaban


1 Answers

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>  
like image 112
dfsq Avatar answered Nov 06 '25 20:11

dfsq



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!