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

让项目完美运行，并在网格上设置它们也非常有效 - IF 我省略了ng-show指令。

更新

好的，这似乎是初始渲染的问题。与开始时一样，没有项目，CSS display属性设置为none。显然这可以避免正确的渲染。如果您使用

覆盖它

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

在你的风格中，一切都按预期工作（当然，网格被隐藏除外）。

Answer 1

我使用ng-if代替ng-show解决了问题。

Answer 2

///first inject $timeout
$scope.$on('navigation::selectedItem', function (evt, selectedItem) {
        myService.getItems(selectedItem, function (err, items) {
          $timeout(function(){
               $scope.items = items;
          };
        });
      });

没有给出项目时隐藏Angular ngGrid

2 个答案: