How to disable a button in ANGULARJS

Question

i have angularJS 1.5.0-rc.2

I found on the internet that i can use the directive

data-ng-disabled="Expression"

But it won't disable a button.

What i tried :

<button data-ng-disabled="false">Select</button> // don't work
<button data-ng-disabled="loaded">Select</button> // don't work
<button data-ng-disabled="loaded != false">Select</button> // don't work

Loaded is defined in my controller as $scope.loaded = false.

How can i disable a button ? Thanks

Aberration

@Jenny they are the same. – Ferrocyanide

Answer 1

The button will be disabled only if the expression is true.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="disableBtn=true">
  <button ng-disabled="disableBtn">test</button>
</div>

Ferrocyanide

Thanks i need to wake up ! – Aberration

This is not good practice. To make this in html. true or false. We must make it in controller. – Fina

@VolodymyrKozlov no, you can refer the example I provided, just use ng-init to define a value, this way don't need to define in controller. – Ferrocyanide

Answer 2

I make it without derective. I made it like this:

<a href="" id="trash" class="cntrbtn remove pull-left disabled" ng-click="disabled||usertaskctrl.removeTasksToArchive()" ng-disabled="disabled">remove</a>

In controller first of all made

$scope.disabled = true;

Than in if/else remove class disabled and change $scope.disabled = false;

I give you example with tag <a></a> this work with button simple.

And in button ng-click first made Test ng-click="disabled||usertaskctrl.removeTasksToArchive()" before make click on some you function.

Fina

Answer 3

Try this 
1 This is direct method of implementation
<script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <button ng-disabled=true>test</button>
</div>

2 another way you can change the value for 



<div ng-app>
  <button ng-disabled=dsblBtn>test</button>
</div>

in controller inside init function 

$scope.dsblBtn = true;

Hartzog

Answer 4

Always use the button tag with ng-disabled in angular js otherwise it will not work.

Summation