ionicLoading后如何显示AngularJS ng-repeat为空
how to display AngularJS ng-repeat is empty after ionicLoading
我正在使用 $ionicLoading 加载新闻页面,如果没有找到新闻,那么这将 运行 在我的模板上:<div ng-show="!news.length" class="empty"> Nothing to show ! </div>
问题:空的 div(没有显示!)在加载时显示,所以如果消息来了,div 将隐藏。现在如果没有找到文章,我需要在加载完成后显示该消息。
我的控制器:
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
我的 HTML 模板:
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="!news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...
有一个简单的解决方案。您可以在 $http
调用的回调中设置为 true 的作用域上创建一个布尔变量。您将此作为条件添加到 Nothing to show 消息中。
控制器
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.isLoadingComplete = false;
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.isLoadingComplete = true;
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
模板
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="isLoadingComplete && !news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...
我正在使用 $ionicLoading 加载新闻页面,如果没有找到新闻,那么这将 运行 在我的模板上:<div ng-show="!news.length" class="empty"> Nothing to show ! </div>
问题:空的 div(没有显示!)在加载时显示,所以如果消息来了,div 将隐藏。现在如果没有找到文章,我需要在加载完成后显示该消息。
我的控制器:
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
我的 HTML 模板:
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="!news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...
有一个简单的解决方案。您可以在 $http
调用的回调中设置为 true 的作用域上创建一个布尔变量。您将此作为条件添加到 Nothing to show 消息中。
控制器
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.isLoadingComplete = false;
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.isLoadingComplete = true;
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
模板
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="isLoadingComplete && !news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...