CODEWITHSUNDEEP
angularjs
Hisanth
Hisanth

Reputation: 65

How to change button text with spinner in ng-click

I need to to change button text with font awesome spinner on ng-click function.

<input id="Button1" type="button" value="{{buttonText}}"  ng-click="Save()" />

My Script as

app.controller("CateCtrl", function ($scope, $http) {
    $scope.buttonText = 'Save';
    $scope.Save = function () {
           $scope.buttonText = '<i class="fa fa-spinner fa-pulse"></i> Please wait';
        }); 
    });

It change the text as it is ` Please wait

Not showing spinner icon.`

Upvotes: 0

Views: 2096

Answers (2)

Sravan
Sravan

Reputation: 18647

Here is the solution, using ng-if condition.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<button>
  <i ng-click="Save()" ng-if="loading" class="fa fa-spinner fa-pulse"></i>
  <span ng-click="Save()" ng-if="!loading">Save</span>
</button>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
       $scope.Save = function () {
          $scope.loading = !$scope.loading;
       }; 
    
});
</script>

</body>
</html>

Here is a working DEMO

Upvotes: 1

Manas
Manas

Reputation: 838

use ng-class

<button><i ng-class="{'fa fa-spinner fa-pulse' : loading}"></i></button>

On the click of the button set

    app.controller("CateCtrl", function ($scope, $http) {
       $scope.buttonText = 'Save';
       $scope.Save = function () {
          $scope.loading = true;
       }); 
   });

Edit1: You can have html inside your button tag. Read

Upvotes: 1

Related Questions