Set Active Tab Style With Angularjs

Set active tab style with AngularJS

A way to solve this without having to rely on URLs is to add a custom attribute to every partial during $routeProvider configuration, like this:

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

Expose $route in your controller:

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

Set the active class based on the current active tab:

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>

angularui tabs setting active tab and its css

In your case you can add ng-class="{active:tab.active}" to the element you want highlighted so <li> or <a>.

For example...

<ul class="nav nav-tabs" role="tablist" class="smooth_transition">
    <li role="presentation"
        ng-repeat="tab in tabset.tabs" class="smooth_transition" 
        ng-class="{active:tab.active}">
        <a href=""
           role="tab"
           ng-click="tabset.select(tab)">{{tab.heading}}
         </a>
    </li>
</ul>

Then change your CSS...

.nav-tabs > li > a.active {
  background : red;
}

Or

.nav-tabs > li.active {
  background : red;
}

Hope this helps!

Angular.js set tab active and another tabs inactive

You could have one array items in your controller, that would have various property in each element of it.

Markup

<ul>
    <li class="foo-item" ng-class="{active: item.id == $parent.selected }" 
      ng-repeat="item in items" ng-click="$parent.selected = item.id">{{item.text}}
    </li>
</ul>

Controller

$scope.items = [
     {id: 1, text: 'Item 1'},
     {id: 2, text: 'Item 2'},
     {id: 3, text: 'Item 3'},
     {id: 4, text: 'Item 4'}
];

Active tab in angular js doesn't work using UI-Bootstrap 0.11.0

In the way that you're using your tabs with active="selectedIndex", you need to at least update you ui-bootstrap to version >= 1.2.0 and add a uib- prefix to all your directives. (e.g: <uib-tabset>, <uib-tab>, etc). See this answer to know how to do it.

---

Anyways, how can achieve this with ui-boostrap version <= 1.2.0 ?

The main difference is that active is a boolean so you need to add a dynamic property in you repeat like active="tab.active". Here you are your updated plunker

HTML (important parts)

<tabset>
  <tab ng-repeat="tab in tabs" active="tab.active">
    <!-- Rest of the tab header code -->
    <a ng-click="removeTab($index)" ng-hide="tabs.length==1">Remove</a>
  </tab>

  <a ng-click="addTab()">Add</a>
</tabset>

JS

$scope.addTab = function() {
  $scope.tabs.push({"ID": $scope.id++, "Name": "Step " + $scope.tabNumber++});
  setLastTabActive();
}

$scope.removeTab(index) {
  $scope.tabs.splice(index, 1);
  setLastTabActive();
}

function setLastTabActive() {
  $scope.tabs[$scope.tabs.length - 1].active = true;
}

How to active tab in Angular Bootstrap UI after change route

I Solved my problem!

If each tab has exclusive route, we can use angular ui router sticky to handle this.

use bootstrap

users.pug

ul.nav.nav-tabs

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users") users list

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users.newUser") newUser

.tab-content(ui-view="usersTab")

usersList.pug

h1 users list page

newuser.pug

h1 new user page

route.js

.state('users', {
    url: '/users',
    templateUrl: 'users.html',
    controller: 'usersCtrl'
})
.state('usersList', {
    url: '/usersList',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'usersList.html',
           controller: 'usersListCtrl'
       }
    }
})
.state('newUser', {
    url: '/newUser',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'newUser.html',
           controller: 'newUserCtrl'    
       }
    }

})

And to active each tab can use: ui-sref-active-eq='active' and .active class change active tab style

---

Related Topics