Home » Angularjs » changing text on button while saving using angularjs

changing text on button while saving using angularjs

Posted by: admin December 5, 2017 Leave a comment

Questions:

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 realised 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

Answers:

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

};

Questions:
Answers:

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>