AngularJS ng-repeat list with buttons: Disable button after click

Question

I have in AngularJS a list with multiple entries and for each entry a button. When clicking the button, the application will do some stuff and after that was successful, the button should be disabled.

The interesting part in my template look like this:

<li ng-repeat="item in items">
  <span>{{item}}</span>
  <button ng-click="doSomeStuff(item)">Request</button>
</li>

I already tried to use the ng-if directive, but then of course every button will disappear.

Previously, I thought about a solution in raw Javascript or jQuery, because it is very easy just to modify the button by its id. But is there a solution provided by AngularJS?

Answer 1

Use ng-disabled as follows:

<li ng-repeat="item in items">
  <span>item</span>
  <button ng-click="doSomeStuff(item)" ng-disabled="item.disabled">Request</button>
</li>

Controller:

$scope.doSomeStuff = function(item) {
    //do operations and finally set disabled to true for that button
    item.disabled = true;
}