当我们在angularjs ui网格中使用默认过滤器时，如何显示找不到匹配的记录匹配

Question

当我们在angularjs ui grid中使用默认过滤器时，如何显示找不到匹配的记录匹配;当我们使用过滤器和数据时，当前显示空白屏幕时不包含该值

Answer 1

这取决于您使用的过滤方式。

服务器端过滤：

只需检查行长度：

  <div ui-grid="gridOptions">
    <div ng-if="grid.rows.length === 0" style="position: absolute; top: 50%; left: 0; right: 0; text-align: center;">No data.</div>
  </div>

如果初始数据为空或过滤器将其过滤掉，则此方法也适用。

客户端过滤：

行总是在那里，只是它们的可见性很重要，因为它们被过滤掉了。

然后你需要向控制器添加一些getter来检查是否有可见的行，如下所示：

vm.hasVisibleRows = function() {
  return vm.gridApi.grid.rows.filter(function(e) { return e.visible; }).length > 0;
}

并在视图中使用这个：

<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid">
  <div ng-if="!$ctrl.hasVisibleRows()" style="position: absolute; top: 50%; left: 0; right: 0; text-align: center;">No data.</div>
</div>

您可以按照自己的方式设置消息外观的样式。

Answer 2

我认为可行的方法是使用外部过滤并使用过滤功能来检测过滤后何时没有数据。您可以使用它来更改$ scope上的标志，并使用该标志来打开或关闭带有消息的div。

这是外部过滤的链接 - http://ui-grid.info/docs/#!/tutorial/Tutorial:%20308%20External%20Filtering

我拿走了他们那里的那个并编辑了它以证明我的解决方案建议。 http://next.plnkr.co/edit/Afzv98kxxyMObK9r

检查filterChanged函数并注意我在allData字段中所做的操作，以便在过滤时保存完整数据。