Угловая сетка ui, как показать загрузчик

Question

Мне интересно, как показать простой загрузчик перед загрузкой данных. Я использую ng-grid-1.3.2 Я googling, но я не нашел никакого примера. Bye

Answer 1

как Maxim Shoustin предложил вы можете использовать angularjs-вертушку из Jim Lavin, который использует (осуждается) Response Interceptors.

Я думаю, что это объяснил лучше здесь: http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

В двух словах, в своем первом решении, что вы должны сделать для вашего приложения нг-сетки является:

) Добавить загрузку GIF в ваш HTML (для загрузки GIF выглядеть here)

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

) В своем коде, как только вы объявили ваш модуль уровня приложения добавить перехватчики Response для запросов 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); 
} 

), а затем добавить директиву 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

Answer 2

Вы angularjs-spinner см GitHub источники

Answer 3

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'}; 
});  

Answer 4

мне нужно подобное поведение, и я наткнулся на этот ответ, но мне нужно, чтобы показать что-то внутри самой сети так here то, что я собрал. Моя идея в том, что я меняю 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": "" 
     }] 
    }; 

Answer 5

У меня был тот же вопрос, что и у вас.

Я считаю, это хороший учебник о нем: http://brianhann.com/ui-grid-the-easiest-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, он использует нг скрытие, чтобы показать/скрыть счетчик, основываясь на значениях 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 окончательной версии показано ,

Answer 6

Просто, добавляя этот код в 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(); 
    }); 

она отлично работает для меня!