Question

-1

changing text on button while saving using Angularjs

rated 0 times [ 4] [ 5] / answers: 1 / hits: 47672 / 11 Years ago, tue, december 17, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

robertjaysona

Add To Favorites

Follow

Total Points: 276

Total Questions: 110

Total Answers: 116

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

answered 11 Years ago blaisep · Accepted Answer

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;

            }

        });

    }



};