angularjs – 当没有给出项目时隐藏Angular ngGrid

前端之家收集整理的这篇文章主要介绍了angularjs – 当没有给出项目时隐藏Angular ngGrid前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个到目前为止工作正常的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显示属性设置为none.显然这可以避免正确的渲染.如果你通过使用覆盖它

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

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

解决方法

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

猜你在找的Angularjs相关文章