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?

Did my answer help you?

Tarun Dugar
– Tarun Dugar

2015-11-11 16:03:13 +00:00
Commented Nov 11, 2015 at 16:03 — Tarun Dugar
– Tarun Dugar, Commented Nov 11, 2015 at 16:03

Tarun Dugar · Accepted Answer · 2015-11-10 12:25:52Z

4

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;
}

answered Nov 10, 2015 at 12:25

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Green 绿色 Over a year ago

Ah, I see. Looks like a good solution, although I merge model data with ui. But for me it works. Thanks!

Tarun Dugar Over a year ago

You're welcome! Please accept the answer if you found it correct... :)

Green 绿色 Over a year ago

How do I do that? I'm quite new to StackOverflow :D

Tarun Dugar Over a year ago

Haha...Click the tick underneath the down arrow on the left.

Green 绿色 Over a year ago

Done. Thanks again :)

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related