1

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!

user3403666
  • 61
  • 3
  • 10

2 Answers2

1

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.

mainguy
  • 8,283
  • 2
  • 31
  • 40
  • Sometimes the simplest solution is the best one, but I can imagine a layout where the grid should be outside the tabs. We will have to see if the OP can clarify. – j.wittwer Apr 02 '14 at 13:30
  • Yes, you are probably right. It's hard to imagine that he didn't try that. Too bad that the description is so unclear. I just wanted to inform you that I used some of your correct code:-) – mainguy Apr 02 '14 at 13:36
0

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

Community
  • 1
  • 1
j.wittwer
  • 9,497
  • 3
  • 30
  • 32
  • used your plunker as a base for simpler solution. What do you think? – mainguy Apr 02 '14 at 07:29
  • I thought about that, but couldn't imagine the OP didn't know how tabs work. I had to assume he was referring to content outside the tabset. – j.wittwer Apr 02 '14 at 13:26