AngularJS ui-grid- 当响应包含空数组时显示 'No Data Available'

Question

我想显示' 无可用数据 ' 在 ui-Grid 3.0 中，如果来自 ajax 的响应包含空的 json 数据数组，即；

data = {"data": []};

现在如果我这样做 -

$scope.gridOptions.data = data.data;

“无可用数据”必须出现在 ui-Grid 中。

当前发生的是，如果数据为空，用户将获得一个空白屏幕。

还有如何使它成为默认功能？

见 plunker这里。

Answer 1

您可以使用“水印”( plunker )( updated plunker )

模板

  <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>

CSS

.watermark {
    position: absolute;
    top : 80px;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

编辑:

使 .watermark 独立于特定的父尺寸:

.watermark {
    position: absolute;
    top: 50%;                    <---- Center vertically in the parent element,
    transform: translateY(-50%); <---- it works for any parent height
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
}