Boostrap Tabs with Angular js

Question

I am using a tabset and sets of different tabs of angular ui bootstrap.

I would like to move in a click to some tab. Moreover, i would like to know which of the tabs is opened right now.

I created a variable in service called currentTab.

The idea is when i am clicking in a tab, the current tab is updated. I can move between the tabs , however, i got an error message in console: "Expression '{0}' used with directive '{1}' is non-assignable!"

Moreover, I have to draw every tab different.

Any ideas?

 <tabset>
    <tab active="currentService.isCurrentTabEqualsGivenName('tab1')" ng-click="currentService.setCurrentTab('tab1')">
        <tab-heading><span class="badge">3</span>  <span>Tab 1</span>
        </tab-heading>

          SOMETHING
    </tab>
     <tab active="currentService.isCurrentTabEqualsGivenName('tab2')" ng-click="currentService.setCurrentTab('tab2')">
        <tab-heading>Tab 2</tab-heading>
          SOMETHING
         </tab>
 </tabset>

CurrentService:

 app.service('CurrentService', [
              function () {

 this.currentTab = "tab1";

 this.isCurrentTabEqualsGivenName = function(name){
        return this.currentTab === name;
    };

    this.setCurrentTab = function(name){
        if (this.currentTab !== name)
            this.currentTab = name;
    };
 }]);

Diosney · Accepted Answer · 2015-05-05 14:36:41Z

1

It is a know issue for the Angular UI team and the community, look at https://github.com/angular-ui/bootstrap/issues/611 for the full discussion.

The solution that worked for me was the one provided by @gilluminate, at https://github.com/angular-ui/bootstrap/issues/611#issuecomment-70339233

I post it here for full reference:

<button class="btn" ng-click="activateTab('search')">Search</button>
<button class="btn" ng-click="activateTab('preview')">Preview</button>
<button class="btn" ng-click="activateTab('edit')">Edit</button>

<tab heading="Search" active="active.search">...</tab>
<tab heading="Preview" active="active.preview">...</tab>
<tab heading="Edit" active="active.edit">...</tab>

then set up your default tab like so:

$scope.active = {
  search: true
};

and the activateTab() function:

$scope.activateTab = function(tab) {
  $scope.active = {}; //reset
  $scope.active[tab] = true;
}

answered May 5, 2015 at 14:36

Diosney

10.6k15 gold badges70 silver badges113 bronze badges

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

1 Comment

null1941 Over a year ago

active attribute value / variable should be a assignable.

Collectives™ on Stack Overflow

Boostrap Tabs with Angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related