javascript - Hide/Show ng-grid?

Question

I have a few tabs set up in which I want to view different things. I want it so that when I click on one of the three tabs, I can view my ng-grid. However, if I click on the other two tabs, I want it so that the ng-grid simply goes away. I've tried using ng-show and simply setting a few boolean values when clicking on certain tabs to show/hide the grid but that doesn't seem to do anything. Any tips on how to do so? Thanks!

Answer 1

为什么不简单地将网格放在选项卡中？

    <tabset>
      <tab heading="one">Lorem ipsum dolor sit amet, aliquid invidunt mei cu, qui ea intellegam appellantur. Gloriatur tincidunt vim te, sed utamur offendit id. Per ferri sanctus nusquam no. An alia ferri suavitate has, qui delenit maluisset interpretaris eu. Ferri tempor
        praesent te nec, et eripuit deterruisset vituperatoribus nec. Facer nullam inciderint ex est, vim cu putant maluisset, sea ei vidit liber perfecto.</tab>
      <tab heading="two (Grid)">
        <div class="gridStyle" ng-grid="gridOptions"></div>
      </tab>
      <tab heading="three">Eu dissentiunt ullamcorper sit, tale errem at est. Ea percipit postulant qui, essent regione nusquam duo et. Omnes perfecto reprehendunt an duo. Mea odio erroribus id.</tab>
    </tabset>

这是没有 ng-show 逻辑的 @j.wittwer 的分叉plunker。对我有用，但也许我不完全理解这个问题。

Answer 2

您可能正在尝试绑定到 and 中的ng-click原语ng-show。

$scope.visiblegrid = false;

而是绑定到对象属性：

$scope.visible = {
  grid: false
};

然后像这样使用它：

<tabset>
  <tab ng-click="visible.grid = false" heading="one"></tab>
  <tab ng-click="visible.grid = true" heading="two (visible grid)"></tab>
  <tab ng-click="visible.grid = false" heading="three"></tab>
</tabset>
<div ng-show="visible.grid == true" class="gridStyle" ng-grid="gridOptions"></div>

这是一个演示： http: //plnkr.co/BLYVtEkP1U83vs0hMkxu