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.
source to share
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.
source to share
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>
source to share