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

ryanhex53 · Accepted Answer · 2015-08-29 12:46:34Z

36

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

};

edited Aug 29, 2015 at 12:46

ryanhex53

7777 silver badges20 bronze badges

answered Dec 17, 2013 at 22:51

Mimo

6,0957 gold badges38 silver badges46 bronze badges

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

2 Comments

ThomasD Over a year ago

thanks. It worked but I realised my needs were a bit more complicated. I have updated the question to reflect this

Mimo Over a year ago

I updated my answer, using a promise with then (supposing your service is an http service alias), where at the last iteration the $scope.ButtonText is updated to the original "Save day".

Alexander Puchkov · Accepted Answer · 2013-12-17 22:54:35Z

5

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>

answered Dec 17, 2013 at 22:54

Alexander Puchkov

5,9934 gold badges38 silver badges49 bronze badges

1 Comment

ThomasD Over a year ago

thanks. It worked but I realised my needs were a bit more complicated. I have updated the question to reflect this

Collectives™ on Stack Overflow

changing text on button while saving using Angularjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related