Simple Tabs in AngularJS with AngularStrap

AngularStrap is a nice library for bringing Twitter Bootstrap into AngularJS. The idea is to make the Bootstrap features, like tabs, easy to use and control from Angular. However, AngularStrap documents the tab feature with an example that I don’t think I’ll be using too often: it stores the tabs’ html content in a variable, presumably in the controller.

But I want to keep content separate from source code. And for the simplest case, the content can live inline in the HTML. Doing it this way, I was able to simplify the data model:

Screen Shot 2013-06-12 at 1.57.04 PM

Screen Shot 2013-06-12 at 1.56.44 PM

Screen Shot 2013-06-12 at 11.46.13 AM

Here’s the Plunker.

Along the way to my solution, I found this good SO post demonstrating loading the tab content from external HTML files.

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s