changing text on button while saving using Angularjs

Question

How do I change the text on a submit-button while saving data in a form?

I have a button like this

<button ng-click="save()">Save data</button> 

and I updated my save-function based on the answers below:

    $scope.ButtonText = "Save day";     $scope.save=function(){         $scope.ButtonText = "Saving day";         for(var i=0;i<days.length;i++)         {            MyService.saveday()             .success(function(data, status, headers, config) {             })             .error(function(data, status, headers, config) {             });         }        $scope.ButtonText = "Save day";     }; 

While saving data, I would like to change the text from "Save data" to "Saving data" and back to "Save data" when the data has been saved.

UPDATE

I added

 $scope.ButtonText = "Save day";  

based on the answers below, but realized that my needs are more complex since I am calling an asynchronous service multiple times. So I guess the question is how I can set the text while the service is being called asynchronously and only revert it back to the original text, after all, calls to the service have finished executing.

thanks

Thomas

Answer 1

You can expose the button text in the scope, and then update the scope value while saving:

<button ng-click="save()">{{button}}</button> 

and in your function:

$scope.button = "Save data";  $scope.save=function(){     $scope.button = "Saving day";     for(var i=0;i<days.length;i++)     {        MyService.saveday()         .success(function(data, status, headers, config) {         })         .error(function(data, status, headers, config) {         }).then(function() {             if (i===days.length) { // is the last iteration                 $scope.button = "Save day";             }         });     }  }; 

Answer 2

There are at least a few ways.

One of the ways is to create another property on a scope, which will hold text of the button.

$scope.buttonText = 'Save'; $scope.save = function() {     $scope.buttonText = 'Saving...'; }; 

Then instead of hardcoding button text in HTML bind it to a new scope property.

<button ng-click="save()">{{buttonText}}</button>