Question

我正在尝试为每个进行ajax调用的容器显示加载器并获取内容。

我需要先在两个div列中显示加载器，然后一旦ajax调用成功，我需要隐藏ajax调用成功的特定列div的加载器。

我曾试图这样做，但无法实现。

预期产出：

所以在页面加载时，两个div应该用微调器填充，然后一旦特定的div ajax调用成功，那么该特定div的微调器应该隐藏，这也应该重复其他div。

这就是我的尝试：

<!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 1

使用ng-show或ng-hide发表评论即可满足您的需求。顺便说一句，你在谈论DIV，但DIV代码中没有HTML。这是一个如何在不使用任何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>

如何使用ajax angular在部分中加载页面

1 个答案: