Javascript 角度ui网格如何显示加载程序

我想知道如何在加载数据之前显示一个简单的加载程序。 我使用的是ng-grid-1.3.2 我在谷歌上搜索，但没有找到任何例子。

---

再见

您拥有

angularjs微调器

，请参阅类似的源代码

建议您可以使用使用的angularjs微调器（已弃用）

我认为这里的解释最好：

简而言之，在他的第一个解决方案中，您需要为ng grid应用程序做的是：

1）将加载的gif添加到html中（用于加载gif外观）

3），然后添加您的loadingWidget指令

app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {
return {
    restrict: "A",
    link: function (scope, element) {
        element.hide();
        scope.$on(_START_REQUEST_, function () {element.show();});
        scope.$on(_END_REQUEST_, function () {element.hide();});
    }
 };
}]);

请参阅HTML代码示例中的更多详细信息

 <img ng-show="loading" src="~/img/loding.jpg" />
 <div class="ngtyle" ng-grid="myGridView"></div>

var app = angular.module('App', ['ngGrid']);
app.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;

  myService.get().then( function ( response ) {
    $scope.items = response.data;
  })
  .finally(function() {
    $scope.loading = false;
  });

 $scope.myGridView = {
    data: 'dataList',
    columnDefs: 'myDisplayColumns'};
});    

---

我也需要一个类似的行为，我找到了这个答案，但我需要展示网格内部的一些东西，我把它们放在一起。我的想法是动态更改gridOptions，并将加载程序显示为网格中的一行

loaderOptions = {
        "columnDefs": [{
            "name": "",
            "field": "loading",
            "enableColumnMenu": false,
            "cellTemplate": '<div style="width:90px; margin:auto;"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>&nbsp;Loading...</div>'
        }],
        "data": [{
            "loading": ""
        }] 
    };

loaderOptions={
“columnDefs”：[{
“名称”：“，
“字段”：“加载”，
“enableColumnMenu”：false，
“cellTemplate”：“正在加载…”
}],
“数据”：[{
“正在加载”：”
}] 
};

我和你有同样的问题

我发现这是一个很好的教程：

他在从服务器获取数据时使用

vm.load=true

，并在完成后更改为

false

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$http', '$timeout', function ($http, $timeout) {
  var vm = this;

  vm.reset = reset;
  vm.noData = noData;
  vm.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'age' }
    ]
  };

  reset();

  ////////////

  // Initialize our data source
  function init() {
    $http.get('data.json')
      .success(function (data) {
        vm.gridOptions.data = data;
      })
      .finally(function () {
        vm.loading = false;
      });
  }

  // Reset the data source in a timeout so we can see the loading message
  function reset() {
    vm.loading = true;

    vm.gridOptions.data = [];

    $timeout(function () {
      init();
    }, 1000);
  }

  function noData() {
    vm.gridOptions.data = [];
  }
}]);

在HTML中，他使用ng hide根据gridOptions.data和vm.loading的值显示/隐藏微调器：

<div id="grid1" ui-grid="vm.gridOptions" class="grid">
    <div class="grid-msg-overlay" ng-hide="!vm.loading">
      <div class="msg">
        <span>
          Loading Data...
          <i class="fa fa-spinner fa-spin"></i>
        </span>
      </div>
    </div>
    <div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
      <div class="msg">
        <span>No Data</span>
      </div>
    </div>
</div>

正在加载数据。。。
没有数据

---

以下是显示的最终版本的示例。

只需在html部分添加以下代码：

<img alt="loading..." src='images/ajax-loader.gif")' /> loading message...

---

这对我来说很好

谢谢，很抱歉打扰您，但可能有一个快速使用ng grid的示例：）为什么要使用ng grid？奇怪的是，我对角度工具很陌生，所以我觉得这是个不错的工具，但我需要一个加载器！：）所以你能给我一个关于网格+分页+加载器最好使用什么的提示吗？最后我得到了它，谢谢我对像我这样的noob的建议这个起点“不推荐”。。。就像我们不应该使用这种方法一样？

<div id="grid1" ui-grid="vm.gridOptions" class="grid">
    <div class="grid-msg-overlay" ng-hide="!vm.loading">
      <div class="msg">
        <span>
          Loading Data...
          <i class="fa fa-spinner fa-spin"></i>
        </span>
      </div>
    </div>
    <div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
      <div class="msg">
        <span>No Data</span>
      </div>
    </div>
</div>

<img alt="loading..." src='images/ajax-loader.gif")' /> loading message...

 $http.get(yourdataUrl)
   .then(function (response) {
       $scope.records = response.data;
       $("#loadingWidget").hide();
   });