如何用ajax angular加载部分页面

How to load the page in partials with ajax angular

本文关键字：分页 加载部 angular 何用 ajax      更新时间：2023-09-26

我试图显示每个容器的加载器，使ajax调用并获得内容。

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

我已经试过了，但是没有成功。

预期输出:

所以在页面加载时，两个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>
演示

如前所述，使用ng-show或ng-hide将满足您的需要。顺便说一句，你说的是DIV，但HTML代码中没有DIV。下面是一个示例，说明如何在不使用任何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>
相关文章：