Search code examples
htmlcssangularjsangular-uiangularjs-animation

angularui tabs setting active tab and its css

I am currently having issues styling an angular directive of tabs. I am trying to set an active tab and deselect all other tabs. However, I am not having any luck. I have tried using css hosted by bootstrap, but that didn't fix the issue. I am not sure where to start, but a point in the right direction would be helpful.

I made a Plunker to demonstrate my issue: http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview

And the code below:

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl" class="smooth_transition">
<tabset>
  <tab heading="test1" >
    <div class="tab-body" >
        test1 should be red
        <br/>
        test2 should be white
    </div>
  </tab>
  <tab heading="test2">
    <div class="tab-body" >
        test1 should be white
        <br/>
        test2 should be red
    </div>
  </tab>
</tabset>
</body>
</html>

app.js

var app = angular.module('plunker',["ngAnimate"]);

app.controller('MainCtrl', function($scope) {
   $scope.name = 'World';
})
.directive('tab', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div role="tabpanel" ng-show="active" ng-transclude  class="smooth_transition"></div>',
        require: '^tabset',
        scope: {
            heading: '@'
        },
        link: function (scope, elem, attr, tabsetCtrl) {
            scope.active = false;
            tabsetCtrl.addTab(scope)
        }
    }
})
.directive('tabset', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'tabset.html',
        bindToController: true,
        controllerAs: 'tabset',
        controller: [ function () {
            var self = this;
            self.tabs = [];
            self.addTab = function addTab(tab) {
                self.tabs.push(tab);

                if (self.tabs.length === 1) {
                    tab.active = true;
                }
            };
            self.select = function (selectedTab) {
                angular.forEach(self.tabs, function (tab) {
                    if (tab.active && tab !== selectedTab) {
                        tab.active = false;
                    }
                });
                selectedTab.active = true;
            };
        }]
    };
});

tabset.html

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

style.css

.smooth_transition.ng-hide {
    opacity: 0;
}

.smooth_transition.ng-hide-add {
    position: absolute;
    width: 100%;
}

.smooth_transition.ng-hide-remove {
    transition: all linear 1s;
    position: absolute;
    width: 100%;
}

/*nav css*/
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    height: 50px;
}

.nav > li {
    position: relative;
    display: block;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-tabs {
    width: 100%;
}

.nav-tabs > li {
    background: white;
    border: solid 1px black;
    float: left;
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.tab-body {
    width: 100%;
    border: solid 1px black;
}

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

  • 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!