How to hide a tab in Angular Bootstrap UI using ng-show/ng-hide

Question

I am using Angular Bootstrap UI to show a tabset. The script I include is ui-bootstrap-tpls-0.6.0.min.js and some template html files.

here is my markup:

<tabset>
    <tab ng-hide="!hideme">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="hideme">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

here is my controller

function myController($scope) {
    $scope.hideme = true;
});

This code does not work (the 2nd tab does not hide). What is the catch to apply ng attribute to a custom directive?

zs2020 · Accepted Answer · 2013-09-27 18:05:12Z

13

The tab directive creates a new scope, so need to use $parent to access the model. Try

ng-hide="$parent.hideme"

answered Sep 27, 2013 at 18:05

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1669811 Over a year ago

The only problem now is if the 1st tab is hide, 2nd tab is showing, the content of 1st tab is still showing as active.

geniuscarrier · Accepted Answer · 2013-09-27 18:09:03Z

2

First Solution: Use both ng-show and ng-hide

<tabset>
<tab ng-show="hideme">
    <tab-heading>
        tab1
    </tab-heading>
    <div>
        tab content 1
    </div>
</tab>
<tab ng-hide="hideme">
    <tab-heading>
        tab2
    </tab-heading>
    <div>
        tab content 2
    </div>
</tab>

Second Solution: Write a directive

.directive("hideTab", function() {
    return function(scope, elm, attrs) {
        scope.$watch(function() {
            $(elm).css("display", "none");
        });
    };
});

answered Sep 27, 2013 at 18:09

geniuscarrier

4,2492 gold badges24 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to hide a tab in Angular Bootstrap UI using ng-show/ng-hide

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related