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

You are probably trying to bind to a primitive in ng-click and ng-show.

$scope.visiblegrid = false;

Bind to an object property instead:

$scope.visible = {
  grid: false
};

Then use it like this:

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

Here is a demo: http://plnkr.co/BLYVtEkP1U83vs0hMkxu

Answer 2

Why not simply put the grid in the tab?

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

Here's the forked plunker of @j.wittwer without ng-show logic. Works for me, but maybe I don't fully understand the question.