13

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

4

6 回答 6

9

像Maxim Shoustin建议您可以使用Jim Lavin的 angularjs-spinner ，它使用（已弃用）响应拦截器。

我认为这里解释得最好：http: //codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

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

1）将加载 gif 添加到您的 html （加载 gif 看这里）

<div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;" loading-widget >
    <div class="loadingContent">
        <p>
            <img alt="Loading  Content" src="images/ajax-loader.gif" /> Loading
        </p>
    </div>
</div>

2）在您的代码中，一旦您声明了您的应用程序级模块，就将 http 请求的响应拦截器添加到配置块

var app = angular.module('myCoolGridApp', ['ngGrid']);

app.constant('_START_REQUEST_', '_START_REQUEST_');
app.constant('_END_REQUEST_', '_END_REQUEST_');
app.config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {
    var $http,
     interceptor = /* see extra details on codingsmackdown.tv */
    $httpProvider.responseInterceptors.push(interceptor); 
}

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();});
    }
 };
}]);

在codingsmackdown查看更多细节

于 2013-09-13T11:29:49.703 回答
5

我和你有同样的问题。

我发现这个很好的教程： http: //brianhann.com/ui-grid-the-easyest-customization-youll-ever-write/

他vm.loading = 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>

这是显示的最终版本的Plunker。

于 2015-11-30T13:09:11.717 回答
2

你有angularjs-spinner，请参阅GitHub来源

于 2013-09-11T14:27:05.213 回答
1

简单地说，通过在您的 html 部分中添加此代码：

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

以及app.controller脚本中的以下代码：

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

这对我来说可以！

于 2017-02-14T08:06:58.667 回答
1

我也需要类似的行为，我遇到了这个答案，但我需要在网格本身内部显示一些东西，所以这是我放在一起的东西。我的想法是我即时更改 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": ""
        }] 
    };
于 2015-08-17T18:45:36.537 回答
0

HTML 代码示例

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

AngularJs 代码示例

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'};
});
于 2015-01-17T10:03:40.583 回答