Angularjs Twitter Bootstrap Directives -- Tabs

Question

I have successfully implemented tabs in a modal with the Angular directives for TB. I have been trying to figure out from the documentation how to make certain things happen when a tab is clicked. No success yet.

View

<tabset>
        <tab ng-repeat="tab in tabs" active="tab.active" heading="{{tab.title}}" disabled="tab.disabled" >
            <div ng-include="tab.content"></div>
        </tab>
    </tabs>

Controller

$scope.tabs = [
        { title:"Home", content:"/beta/application/views/images/uploader/create.html", active: true },
        { title:"Upload", content:"/beta/application/views/images/uploader/upload.html"},
        { title:"Edit", content:"/beta/application/views/images/uploader/edit.html"}
    ];

There is a ng-click="select()", leaving me to think I could call the following.

$scope.select = function () {
    console.log('testing');
};

Obviously I am wrong.

Thanks

BoxerBucks · Accepted Answer · 2013-07-30 19:52:42Z

3

I think you're talking about the AngularUI tabs and I think you are talking about the select attribute on the directive.

If you put the select="scopeMethod()" on the tab directive, and define the controller method like so:

$scope.scopeMethod = function(){
  //Do something meaningful
  alert("You clicked this tab");
}

the method will fire when you click on that tab.

This should also work for tabs that are created within an ng-repeat. See this plunkr

edited Jul 30, 2013 at 19:52

answered Jul 30, 2013 at 19:37

BoxerBucks

3,1242 gold badges23 silver badges26 bronze badges

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

3 Comments

SuperNinja Over a year ago

your assumptions are correct. Using the ng-repeat, do you know what the best option is for firing a method for a particular tab? -- thanks

BoxerBucks Over a year ago

Apparently, I was wrong. This should also work on tabs within an ng-repeat. See my edit and link to the plunker.

SuperNinja Over a year ago

thanks man, solid answer and clears up some other issues as well. Thanks

Collectives™ on Stack Overflow

Angularjs Twitter Bootstrap Directives -- Tabs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related