如何将 2 ui-grid 与 ng-hide 和 ng-grid 一起使用？答案

【问题标题】：How to use 2 ui-grid with ng-hide and ng-grid?如何将 2 ui-grid 与 ng-hide 和 ng-grid 一起使用？
【发布时间】：2017-01-30 08:45:06
【问题描述】：

我是 angularjs 的新手，我想创建一个页面，我想在其中添加 2 个 ui-grid 和一个名为“other-grid”的按钮，第一次它必须加载第一个网格，当我们再次单击时，第一个网格必须替换使用第二个网格但是有一些问题我想使用 ng-show 和 ng-hide 它适用于第一个网格但不能正确加载第二个网格为什么如此和任何解决方案请..

【问题讨论】：

标签： html angularjs ng-show ng-hide ui-grid

【解决方案1】：

在处理 ui-grid 时使用 ng-if 可能会更好。

至于 ng-show，它在渲染 ui-grids 时会做一些奇怪的事情（参考：https://github.com/angular-ui/ui-grid/issues/4559）

这里是 2 个网格的 plunker，带有一个工具按钮： http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview

 <button ng-click="toggleuigrid()">toggle grid</button>
 <div class="row">
     <div class="span4" ng-if="show">
         <div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
     </div>

    <div class="span4" ng-if="!show">
        <div id="grid2" ui-grid="gridOptions2" class="grid"  ></div>
    </div>
 </div>

【讨论】：

【解决方案2】：

确保为“其他”隐藏网格提供适当的高度和宽度，以便框架知道网格尺寸

您可以尝试使用 ng-if、ng-show、ng-hide 并在单击按钮时显示其他网格 - 'other grid'

这是官方 UI 网格 tutorial，它的功能与您想要的类似

【讨论】：