没有给出项目时隐藏Angular ngGrid

Question

ngGrid到目前为止,我的工作正常.但是,我想在没有给出任何项目时隐藏它,因此没有数据显示.

我试过的是:

<div class="gridStyle" ng-grid="gridOptions" ng-show="items.length > 0">
</div>

这有效,它实际上隐藏了网格items.length等于0,但一旦我向items数组添加数据,网格将不会显示.

如果我将ng-show指令放到外部也没有区别div:

<div ng-show="items.length > 0">
  <div class="gridStyle" ng-grid="gridOptions">
  </div>
</div>

我知道我做错了什么？

负责的控制器看起来像这样:

(function (root) {
  'use strict';

  root.app.controller('listItemsController', [
    '$scope', 'myService',
    function ($scope, myService) {
      $scope.items = [];

      $scope.gridOptions = {
        columnDefs: [
          { field: 'id', displayName: 'Id' },
          { field: 'type', displayName: 'Type' },
          { field: 'value', displayName: 'Value' }
        ],
        data: 'items',
        enableRowSelection: false
      };

      $scope.$on('navigation::selectedItem', function (evt, selectedItem) {
        myService.getItems(selectedItem, function (err, items) {
          $scope.items = items;
        });
      });
    }
  ]);
})(window);

让项目完美运行,并在网格上设置它们也可以完美地工作 - 如果我省略了ng-show指令.

UPDATE

好的,它似乎是初始渲染的问题.与开始时一样,没有项目,CSS display属性设置为none.显然这可以避免正确的渲染.如果你通过使用覆盖它

ng-hide: {
  display:block!important;
}

在你的风格中,一切都按预期工作(当然,除了网格被隐藏).

Answer 1

我用ng-if而不是用它来解决它ng-show.