Question

190

How to add a spinner while loading the content in AngularJS?

rated 0 times [ 194] [ 4] / answers: 1 / hits: 65698 / 9 Years ago, fri, july 31, 2015, 12:00:00

I am using button spinner while loading the content, when the user clicks on the Search button content will load, at this time buttonLabel will be changed to Searching and spinner will be shown (Here button will be disabled). After loading the content (Promise resolved) buttonLabel will be reverted back to Search (button will be enable here).

I have tried the below code, but it is always showing the spinner.

HTML :

<button class=btn btn-xs btn btn-blue ng-click=show()>

  <span><i class=glyphicon glyphicon-off></i></span> {{buttonLabel}}

</button>

Script :

$scope.buttonLabel = Search;

$scope.show = function() {

  $scope.buttonLabel = Searching;

  $scope.test = TestService.getList( $cookieStore.get('url'),

    $rootScope.resourceName+/students );

    $scope.test.then( function( data ) {

      if( data.list ) {

        $scope.testData = data.list;

        $scope.buttonLabel = Search;

      }

    }

  }

Updated Fiddle : http://jsfiddle.net/xc6nx235/18/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

georginat

Add To Favorites

Follow

Total Points: 656

Total Questions: 107

Total Answers: 108

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

answered 9 Years ago byrondonavanc · Accepted Answer

<div ng-app=formDemo ng-controller=LocationFormCtrl>

<div>

    <button type=submit class=btn btn-primary ng-click=search()> 

        <span ng-show=searchButtonText == 'Searching'><i class=glyphicon glyphicon-refresh spinning></i></span>

        {{ searchButtonText }}

    </button>

</div>

All you need to do is use ng-show or ng-hide directives.

ng-show=expression

<span ng-show=searchButtonText == 'Searching'>

    <i class=glyphicon glyphicon-refresh spinning></i>

</span>

this span will only be visible when searchButtonText will be equal to a string 'Searching'.

You should learn more about angular's directives. They'll be useful in future.

Good luck.

Demo http://jsfiddle.net/xc6nx235/16/