Bootstrap load button with Angularjs

In an angular app 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 that loading state like this:

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

      

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

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

      

How can I accomplish the same behavior in an angular app? The app also includes JQuery and Bootstrap.

+3


source to share


2 answers


In your angularjs app, 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 a fiddle I hope this is what you want to implement.

+3


source


The advantage of using it data-loading-text

is to leave the HTML outside the controller. Instead of replacing the text in the controller function, use ng-show

also 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 at boot time use ng-disabled

. To use the rotating FontAwesome icon, replace the tag <span>

with the tag <i>

as shown below:

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

      

+11


source







All Articles