CODEWITHSUNDEEP
angularjsangular-ui
Alexandru R
Alexandru R

Reputation: 8833

How can you hide a tab in Angular Boostrap UI using ng-show?

I'm trying to display a tab using angular bootstrap UI and ng-show. It simply doesn't work.

<tabs ng-model="currentTab">
    <pane heading="Triggers" active="panes['triggers'].active" ng-show="condition">

    </pane>
    <pane heading="Recipients" active="panes['recipients'].active">
</tabs>

Any ideas how to hide it on demand?

Upvotes: 1

Views: 2394

Answers (2)

supermasher
supermasher

Reputation: 742

If you want to hide/show a component, just create a directive for your toggle that switches the tabs CSS classes on click. Something along the lines of...

.directive('tabToggle', function() {

    return function (scope, element, attrs) {

        element.on('click', function(e){

            $('.myTabComponent').toggleClass('hide', 'show');

        });
    };
})

Upvotes: 2

rych
rych

Reputation: 1187

If you don't mind defining your tabs and tab contents in your controller instead of in the markup, then probably the easiest thing to do is an ng-repeat on the pane elements.

You can then maintain an array of tabs in the controller, adding and removing from the array as you wish. This approach adds its own constraints, but works reasonably well.

See http://plnkr.co/edit/RteTQxFPKCqFgMCEWdJY for a rough example.

This was derived from the documentation example of dynamic tabs.

Upvotes: 1

Related Questions