CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptabs
Wilfredo P
Wilfredo P

Reputation: 4076

Bootstrap tab Active/inactive and Angularjs

I'm using the Angularjs and Bootstrap tab here my code:

  <body  ng-controller="TabsCtrl">
    <button ng-click="addNewWorkspace('jobs')">Open Tab jobs<i class="icon-plus-sign"></i></button> 
    <button ng-click="addNewWorkspace('invoices')">Open Tab invoices<i class="icon-plus-sign"></i></button> 
    <button ng-click="addNewWorkspace('payments')">Open Tab payments<i class="icon-plus-sign"></i></button> 

    <ul class="nav nav-tabs">
      <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
        <a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}
        <button ng-click="removeTab($index)">-<i class="fa fa-times"></i></button>
        </a>
      </li>
    </ul>
    <div ng-view></div>

  </body>

When I press any button, it will open a new tab, here my first problem, the tab is created but not active, I need press the tab created to see the info.

My second problem is when I open any the tab, and is closed, the tab does not show the info about other tab open. For example: I open payments and open this tab, when I close it not show the jobs info.

What I did?

I tried use $location.path when I add/remove a workspace to force that shows any other tab but that does not work. Also I tried $window with the same result.

I don't know if I confused the concepts here.

Live Demo With complete code

Upvotes: 0

Views: 854

Answers (1)

Pavan Kumar Jorrigala
Pavan Kumar Jorrigala

Reputation: 3085

$scope.addNewWorkspace = function(page) {
var tab = {
    link: '#/' + page,
    label: page
};
$scope.tabs.push(tab);
$scope.selectedTab = tab;
$location.path('/' + tab.label);
};

choose the current tab as selectedTab

$scope.selectedTab=tab;

redirect to new location

$location.path('/'+tab.label);

Upvotes: 1

Related Questions