Angularjs Button loading state and disabled when calling server rest

Question

In my angular application, I have some buttons that call REST services.

Sometimes, the Rest Service takes a long time to reply. To prevent the user to click once before receiving the service answer, I would like to disable the button and change his value to 'loading...'

I want to do the same, only for all buttons whose value is equal to 'Search' or 'Relaunch'

Exemple:

Code :

<input type="submit" class="btn" ng-click="relaunch()" ng-value="Relaunch"/>

$scope.relaunch= function(){
    RelaunchService.relaunch().then(function(data){
       // server response
      })
};

For this, I want to create one directive. But I do not know how to do it :-(

PS: Note that the user can click on several different buttons at the same time.

Please, show us your code.

Alessio Cantarella
– Alessio Cantarella

2016-03-04 10:35:07 +00:00
Commented Mar 4, 2016 at 10:35 — Alessio Cantarella
– Alessio Cantarella, Commented Mar 4, 2016 at 10:35
@AlessioCantarella code added

Karim Oukara
– Karim Oukara

2016-03-09 09:42:26 +00:00
Commented Mar 9, 2016 at 9:42 — Karim Oukara
– Karim Oukara, Commented Mar 9, 2016 at 9:42

Divyesh Savaliya · Accepted Answer · 2016-03-04 10:53:26Z

1

You can use ng-disabled

Syntax is

<INPUT
 ng-disabled="expression">
  ...
</INPUT>

So in your case you can do it as

<input type="submit" class="btn" ng-disabled="btnDisabled"  ng-click="relaunch()" ng-value="Relaunch"/>
 $scope.btnDisabled=false;
 $scope.relaunch= function(){
     $scope.btnDisabled=true;
     RelaunchService.relaunch().then(function(data){
       // server response

     }).finally(function(){
         $scope.btnDisabled=false;
     })
 };

edited Mar 4, 2016 at 10:53

answered Mar 4, 2016 at 10:34

Divyesh Savaliya

2,7403 gold badges20 silver badges39 bronze badges

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

2 Comments

A. Wolff Over a year ago

You probably better have to use finally() instead of then() to re-enable button

Karim Oukara Over a year ago

Thank you for your answer. I want to use only one directive. because I have a lot of button so a lot of code to modify in this case

Collectives™ on Stack Overflow

Angularjs Button loading state and disabled when calling server rest

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related