Conditional tabs

[michaelolson]

I've read a couple of the issues around tabs, namely:
#195
#287

Neither seems to address the use case of conditional inclusion. Although I am an Angular novice, from the examples I have seen, there seems to be no obvious way to conditionally render a pane/tab (the latter being the name from #287). The effect I want to achieve would look like this:

<tabs>
  <pane heading="Just a pane">
    Always around.
  </pane>
  <pane ng-show="user.hasDetails()" heading="Conditional Pane">
    User's details.
  </pane>
</tabs>

Because pane/tab are custom directives and don't support ng-show, I cannot simply avoid including a particular tab based on a conditional. This effect was easy to achieve by rolling my own tab solution, but it seems like the use case may be common enough, given the existence of ng-show/ui-show in the first place, to warrant support in the directive itself. The directive could also support ng-include as an attribute, with the include only occurring if the specified condition is met.

I did try wrapping the directives in show/hide directives, but because of the way they are rendered, this has no effect.

[ajoslin]

You could:

a. put it in an ng-repeat
b. Use something like ui-if:

<pane ui-if="renderMe == true"></pane>
</pane>

[michaelolson]

I've seen the ng-repeat style for tabs, but that style seems to favor embedding view information in javascript files or lots of partials, neither of which really fits my use case. I just ran a plunker using ui-if and it does seem to work as expected, though ng-show fails pretty miserably. Guess I'll head down the ui-if route next time.

[dreadjr]

what is suggested now, ui-if says removed in the documentation. Need a way to hide or not render the tabs.

[ajoslin]

ng-if :-) http://docs.angularjs.org/api/ng.directive:ngIf

[dreadjr]

oh thanks, thought it was in the angular-ui code base.

On Thu, Oct 3, 2013 at 12:13 PM, Andy Joslin notifications@github.comwrote:

ng-if :-) http://docs.angularjs.org/api/ng.directive:ngIf

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/319#issuecomment-25649280
.

[taeric]

I had a similar desire and ng-if wasn't working for me. Specifically, it complained that two templates wanted to transclude something. This an obvious dumb thing I did, or a new restriction?

Regardless, for a local build, I went ahead and added an attribute to <tab> named visible that behaves similar to disabled and passes its value through to an ng-show on the included template[1]. I would be delighted to put in a pull request for this, if there is still interest for this feature.

[1] I changed it so that it simply doesn't put the tab or its contents on the page if it is not visible.