So with bootstrap it seems pretty straightforward to implement a "Loading" state when clicking on a button, see link below (Stateful section):
http://getbootstrap.com/javascript/#buttons-stateful
I did some research but wasn't able to find a straightforward to implement that in Angular thru the Angular Bootstrap UI lib. Any tips out there?
You could just set the text, disabled state etc depending on if you're loading data or not. Something like this
<button ng-click="vm.clickAction()" ng-disabled="vm.loading" type="button" class="btn btn-primary">
{{ vm.loading ? 'Loading...' : 'Click me!' }}
</button>
Then in the controller
.controller('TestController', function(someService) {
var vm = this;
vm.loading = false;
vm.clickAction = function() {
vm.loading = true;
someService.doSomething().then(function(someData) {
vm.someData = someData; // optional
vm.loading = false;
});
}
}
We use something similar like this here:
This changes the button's class to active and the text to "Loading" when $scope.loading is true:
<button ng-click="myClick()" ng-class="{active: loading}">
<span ng-show="loading">Loading</span>
<span ng-hide="loading">Submit</span>
</button>
Or, if you want the button to be disabled, use:
<button ng-click="myClick()" ng-disabled="loading">
<span ng-show="loading">Loading</span>
<span ng-hide="loading">Submit</span>
</button>
In your controller, add this function:
$scope.loading = false;
$scope.myClick = function() {
$scope.loading = true;
... do something slow
$scope.loading = false;
}
