ionicLoading后如何显示AngularJS ng-repeat为空

Question

我正在使用$ionicLoading 加载新闻页面，如果没有找到新闻，那么这将在我的模板上运行：<div ng-show="!news.length" class="empty"> Nothing to show ! </div>

问题：加载时会显示空 div（Nothing to show ！），所以如果有消息，那么该 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">
    ...

Answer 1

有一个简单的解决方案。您可以在 $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">
...