Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am using Angular with Twitter Bootstrap Nav Tabs and want to be able to enable/action things based on the active tab.

This fiddle shows my basic structure: 

fiddle

What I want to do is on the Details tab, only load or process the content if the tab is activated.

At the moment there is a delay/processing overhead when the contents of the Details tab is loaded as it is quite processor intensive. It is fairly small but adds up to quite a delay when all the row of tabs are rendered in the working copy. The example only shows 3 rows but a normal page would have about 10. Since the user is unlikely to want to click on the Details tab on every row, I would like the content activated or loaded whenever the tab is selected.

Any ideas on how to implement this?

share|improve this question
    
If you use ui-bootstrap your select attribute will be an expression you can use to load the content. –  Dylan Dec 17 '14 at 22:41
    
use ng-if like <div ng-if="option=='details'" ng-include="/details"> –  Aidin Dec 17 '14 at 23:57
    
@Aidin perfect! that worked. I will accept that as the answer if you add it. –  DeclanMcD Dec 18 '14 at 16:22

1 Answer 1

up vote 2 down vote accepted

You can use a combination of ng-if and ng-include tags to lazy load contents

<div ng-if="option=='details'" ng-include="/details">
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.