Bootstrap button loading text with Angularjs

Question

In a non-angular application that uses bootstrap and jquery, I can create buttons like this:

<button id="saveButton" data-loading-text="Please wait...">Save</button>

Then, when the button is clicked, I can set it to it's loading state like this:

$('#saveButton').button('loading');

Clicking this button also fires an ajax request, and in the callback for that request, I can reset the button like this:

$('#saveButton').button('reset');

How can I accomplish this same behavior within an angular application? The application also includes Jquery and Bootstrap.

Brent Washburne · Accepted Answer · 2015-03-25 04:43:58Z

13

The advantage of using data-loading-text is to keep the HTML out of the controller. Instead of swapping the text in a controller function, use ng-show and ng-hide inside the button:

<button>
    <span ng-hide="saving">Save</span>
    <span ng-show="saving">Please wait...</span>
</button>

In the controller, set $scope.saving to true or false.

$scope.saving = false;
$scope.save = function() {
    $scope.saving = true;
    // Do your saving here
    $scope.saving = false;
}

If you want to disable the button while it is loading, use ng-disabled. To use a spinning FontAwesome icon, replace the <span> with the <i> tag as shown here:

 <button ng-disabled="saving">
    <span ng-hide="loading">Save</span>
    <i class="fa fa-spinner fa-spin" ng-show="saving"></i>
</button>

answered Mar 25, 2015 at 4:43

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

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

Comments

mpatel · Accepted Answer · 2014-10-02 22:37:34Z

3

In your angularjs application, inside your view:

<div>
    <button type="submit" class="btn btn-primary" ng-click="search()">{{ searchButtonText }}
    </button>
</div>

In the controller:

$scope.searchButtonText = "Search";

$scope.search = function() {
     $scope.searchButtonText = "Searching";
    // Do your searching here
}

Here is the fiddle Hope this is what you want to implement.

edited Oct 2, 2014 at 22:37

answered Oct 2, 2014 at 22:29

mpatel

3482 silver badges13 bronze badges

4 Comments

flyingL123 Over a year ago

This works, but seems like it could get messy quickly in a large application with lots of buttons as well as additional behavior that needs to occur during and after the saving process. Having to constantly put the application in a loading and non-state seems complicated. I was hoping to find a way to solve this using directives. I will mark your answer as accepted and ask a new question specifically about directives.

mpatel Over a year ago

Yes, you can use this way if you have few buttons on a page. If you wish, you can create custom directive according to your requirement.

Jorge Enrique Reyes Salas Over a year ago

is not just changing the text is also disabling the button.

Denny Mueller Over a year ago

Have the the same issue like OP. This is some sort of solution. But if you want to use also html inside the searchButtonText e.g. a loader icon. Then this doesn't work.

Collectives™ on Stack Overflow

Bootstrap button loading text with Angularjs

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related