AngularJS Tabular Navigation Selected Styling

Question

I am creating a navigation structure. I tried to use AngularStrap and Bootstrap, but as soon as I injected them into my app, Angular failed. I found this link and constructed my navigation tab-bar. I like how easy it is to customize. My problem is, I don't know how to apply the css for the selected tab in angular. I can't apply an id to an element conditionally, and when I try and break up the css into multiple classes, the tabs don't display the same way.

<ul class="tablist">
    <li ng-repeat="tab in tabList" ng-click="setSelected($index);">
        <a href="javascript: void(0);">{{tab.title}}</a>
    </li>
</ul>

vs.

<ul class="tablist">
    <li id="selectedTab"><a href="javascript: void(0);">Admin</a></li>
</ul>

What is the best way to apply the selected formatting? See this Fiddle for a more fleshed out example.

madhured · Answer 1 · 2014-02-26T20:35:19.070

1

Updated: http://jsfiddle.net/dLemh/6/

to have background color change use css important on the class

 ng-class="{selected: isSelected(tab)}"

 $scope.currentSelectedTab = {};
    $scope.setSelectedTab = function(tab){
        $scope.currentSelectedTab = tab
    }

    $scope.isSelected = function(tab){
        if(tab == $scope.currentSelectedTab){
        return true;
        }

        return false;
    }

Please let me know if anything

edited Feb 26 '14 at 20:35

answered Feb 26 '14 at 20:04

madhured

443
2
8

So I can put the border around it, but I can't make the selected tab go from white text on blue background to blue text on grey background? – C1pher Feb 26 '14 at 20:12
You can do it, I updated to have the css property to .selected a { } and use important.Please check and let me know if anything – madhured Feb 26 '14 at 20:36
+1 for a working solution. I also came up with a solution you might want to look at. I have heard recommendations not to use `!important` except to test CSS for priority. – C1pher Feb 26 '14 at 20:50

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

I found this SO Post that I was able to use and fix the CSS formatting with regards to their priority.

.tablist li.selectedTab a {
    background: none;
    border: 2px solid #6B74C6;
    border-bottom: 0px;
    background-color: #F3F3F3;
    color: #0378D9;
    text-decoration: none;
}

<ul class="tablist">
    <li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
        <a href="javascript: void(0);">{{tab.title}}</a>
    </li>
</ul>

edited May 23 '17 at 12:10

Community

1
1

answered Feb 26 '14 at 20:40

C1pher

1,933
6
33
52

Ah! thats a better solution instead of important. – madhured Feb 26 '14 at 20:52

AngularJS Tabular Navigation Selected Styling

2 Answers2