[在使用过滤器和服务器端分页时如何处理ng-if指令中的ui-grid totalItems

Question

我认为有这样的代码块：

<div class="alert alert-info text-center"
     ng-if="!loading && !model.items.length">
  There are currently no data. To get started click
  <a href ng-click="showDataModal()"><i class="fa fa-plus"></i>
    Add Data
  </a>.
</div>

我还使用angularjs ui-grid进行服务器端分页和过滤并进行分配

$scope.gridOptions.data = model.items

我的回调函数：

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
    $scope.load();
});

gridApi.core.on.filterChanged($scope, function () {
    $scope.load();
});

在$scope.load();方法中，我准备了参数，这些参数将允许服务器端代码具有足够的信息以能够检索特定的数据子集，然后使用存在的总行数更新$scope.gridOptions.totalItems变量。

$scope.load = function () {
  ...
  $scope.model.load(params).then(function () {
       $scope.gridOptions.totalItems = $scope.model.total;
       $scope.loading = false;
  });
}

问题是，当我放置一个过滤器并得到一个空数组作为响应时，我开始从我的视图中看到该消息，因为model.items.length为假。仅在没有过滤器且服务器端无数据且model.items.length为true并且我开始使用过滤器时才在初始请求后如何获得此消息，当数组为空时看不到该消息。我不知道该怎么做，因为gridOptions中的totalItems总是会更改。开始使用过滤器时，我不想看到有关空数据的消息。

Answer 1

使用started标志：

<div class="alert alert-info text-center" ng-if="!started && !loading">
  There are currently no data. To get started click
  <a href ng-click="showDataModal()"><i class="fa fa-plus"></i>
    Add Data
  </a>.
</div>

$scope.load = function () {
  //...
  $scope.loading = true;
  $scope.model.load(params).then(function () {
      $scope.gridOptions.totalItems = $scope.model.total;
      $scope.started = true;
  }).finally(function() {
      $scope.loading = false;
  });
}

如果正在加载数据或设置了started标志，则框架将隐藏“开始使用”消息。

有关更多信息，请参阅

• De Morgan's Laws