M-S M-S - 2 months ago 15
AngularJS Question

How to load the page in partials with ajax angular

I am trying to show the loader for each container which makes ajax call and get the content.

I need to show the loader first in both div columns, and then once the ajax call is success i need to hide the loader for the specific column div whose ajax call is success.

I have tried to do so, but unable to achieve it.

Expected Output:

So on page load the two div's should be filled with the spinner and then once the specific div ajax call is success then the spinner of that particular div should hide, this should repeat for other div as well.

This is what I tried:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myController">

<!-- <div class="loading-spiner-holder" data-loading><div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" /></div></div>
-->
<ul ng-repeat="col in column">
<li>{{col.name}}</li>
</ul>

<ul ng-repeat="col2 in column2">
<li>{{col2.name}}</li>
</ul>


</body>

</html>


Demo

Answer

As commented using ng-show or ng-hide will do what you need. BTW you are talking about DIV but there is no DIV in your HTML code.. Here is an example on how you can achieve it without the use of any Directives.

  .controller('myController', function($scope, $http) {
      //define boolean value for your columns : true=show false=hide
      // this will show the spinner on page load
      $scope.ui = {
          showSpinnerCol1 : true,
          showSpinnerCol2 : true
      }
      $scope.column = [];  $scope.column2 = [];
      $http.get('test.json')
          .success(function(data) {
            $scope.column = data[0].column;
            $scope.ui.showSpinnerCol1 = false; //hide spinner1 when ajax is done.
        });
        $http.get('test1.json')
          .success(function(data) {
            $scope.column2 = data[0].column2;
            $scope.ui.showSpinnerCol2 = false;//hide spinner2 when ajax is done.

        });
  });


<div>
    <div ng-show="ui.showSpinnerCol1" class="loading-spiner">
        <img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />
    </div>
    <ul ng-repeat="col in column">
      <li>{{col.name}}</li>
    </ul>
</div>


<div>
    <div ng-show="ui.showSpinnerCol2" class="loading-spiner">
        <img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />
    </div>
    <ul ng-repeat="col2 in column2">
      <li>{{col2.name}}</li>
    </ul>
</div>
Comments