Мне интересно, как показать простой загрузчик перед загрузкой данных. Я использую ng-grid-1.3.2 Я работаю в Google, но я не нашел никакого примера. Bye
Angular сетка ui, как показать загрузчик
Ответ 1
like Максим Шустин предложил вам использовать угловое заклинание из Джим Лавин который использует (устарел) Response Interceptors.
Я думаю, что он лучше всего объяснил: http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/
В двух словах, в его первом решении, что вы должны сделать для своего ng-grid-приложения:
1) Добавьте загрузочный gif в свой html (для загрузки gif look здесь)
<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), а затем добавьте директиву loadWidget
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
Ответ 2
У меня был тот же вопрос, что и вы.
Я нахожу этот хороший урок об этом: 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 он использует 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 окончательной версии.
Ответ 3
У вас есть angularjs-spinner
, см. GitHub источники
Ответ 4
Мне также нужно было подобное поведение, и я наткнулся на этот ответ, но мне нужно было показать что-то внутри самой сетки, поэтому здесь - это то, что я поставил вместе. Моя идея в том, что я меняю gridOptions на лету и показываю загрузчик как строку внутри сетки.
loaderOptions = {
"columnDefs": [{
"name": "",
"field": "loading",
"enableColumnMenu": false,
"cellTemplate": '<div style="width:90px; margin:auto;"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>'
}],
"data": [{
"loading": ""
}]
};
Ответ 5
Просто добавив этот код в свою часть html:
<img alt="loading..." src='images/ajax-loader.gif")' /> loading message...
и следующий код в вашем app.controller script:
$http.get(yourdataUrl)
.then(function (response) {
$scope.records = response.data;
$("#loadingWidget").hide();
});
он отлично работает для меня!
Ответ 6
Код 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'};
});