angularjs - 未提供任何项目时隐藏 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>

知道我做错了什么吗？

负责的 Controller 看起来像这样:

(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指示。

更新

好吧，看来是初始渲染有问题。和一开始一样，没有项目，CSS display属性设置为 none .显然，这避免了正确的渲染。如果您通过使用覆盖它

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

在您的样式中，一切都按预期工作(当然，隐藏的网格除外)。

Answer 1

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