Question

我有angularjs ui-grid，我使用以下条件检查数据的可用性，这意味着如果数据不在那里我显示'无数据可用'消息。问题是由于数据庞大，我的api调用速度有点慢，所以虽然这个调用过程中没有可用的数据会显示，但我需要先以角度方式隐藏它。我不能使用disply：none最初没有因为在网格过滤器中有这么多条件，之后该消息必须显示，所以每次我不能说disaply：none和display：block。任何帮助都会非常有用，谢谢。

HTML

<div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
        <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
      </div>
    </div>

示例js调用

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    data = {"data": []};
    $scope.gridOptions.data = data;
  });

请参阅以下plunker

中的演示

Answer 1

在控制器中添加一个新变量：

UTF-8

将您的api通话更改为：

TRUE

在视图中更改：

$scope.noData = false;

<强> Test Plunker

Answer 2

使用另一个状态处理程序变量轻松完成，例如$scope.loading：

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
    <div class="watermark" 
         ng-show="!gridOptions.data.length && !loading">No data available</div>
    <div class="watermark" 
         ng-show="loading">loading ...</div>
  </div>
</div>

控制器

$scope.loading = true;

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function(data) {
    $scope.loading = false;
    data = {"data": []};
    $scope.gridOptions.data = data;
});

1）plnkr Demo 2）plnkr Demo （包含一点暂停）

如何在api加载时避免AngularJS ui网格显示“无数据”消息

2 个答案:

控制器