CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
bsr
bsr

Reputation: 58742

Angular JS: Bootstrap tab is not showing properly

Why the tabs are not shown with AngularJS tabbale directive.

http://plnkr.co/edit/yu0Bh0?p=preview

This is optional part of angularJS, which is used everywhere in the docs (here)

The source of the directive is here.

I don't see any special css in the doc site.

EDIT:

the markup of the plunkr (above) was copied from the doc link given above. But, when tried with the markup on Angular main page (angularjs.org), it works. Not sure how it works at doc site. The working markup has data-toggle attributes, and url fragments to tab pane.

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class=""><a href="#project-html" data-toggle="tab">index.html</a></li>
        <li class=""><a href="http://angularjs.org/#project-js" data-toggle="tab">project.js</a></li>
        <li class=""><a href="http://angularjs.org/#list-html" data-toggle="tab">list.html</a></li>
        <li class="active"><a href="http://angularjs.org/#detail-html" data-toggle="tab">detail.html</a></li>
        <li class=""><a href="http://angularjs.org/#mongolab-js" data-toggle="tab">mongolab.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="project-html">
            <h1>project</h1>
        </div>
        <div class="tab-pane" id="project-js">
            <h1>project js</h1>

        </div>
        <div class="tab-pane" id="list-html">
            <h1>project html</h1>

        </div>
        <div class="tab-pane active" id="detail-html">
        </div>
        <div class="tab-pane" id="mongolab-js">
        </div>
    </div>
</div>

Upvotes: 0

Views: 3065

Answers (1)

Ganaraj
Ganaraj

Reputation: 26841

There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).

In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like 

$(".tabbable").tabs();

in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.

Upvotes: 1

Related Questions