1

I am new to angularjs I am trying to create a tab so I created an array of content like this

$scope.panels = [
        { title: "About",   url: "about", active: true  },
        { title: "Contact", url: "contact"              },
        { title: "Services",    url:"service"           },

    ]

And here is how I have implemented the loop

<li class="nav-tab" ng-repeat="panel in panels">{{panel.title}}</li>

Now I need to highlight the active tab by adding active class when active is true. How can I add if(active== true) then class should be like this class="nav-tab active"

2

3 Answers 3

1

All you need to do is to use ng-class directive.

The following code should work for you:

<li class="nav-tab" ng-repeat="panel in panels", ng-class="{active:panel.active}">{{panel.title}}</li>

Note that if you class have any - (dashes in its name) then you would have to wrap the class name in quotes ('') e.g. ng-class="{'active-class':panel.active}".

I hope that will help.

0
1

Have a look at ng-class,

https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-class="{'active-Class': isOpen, 'inactive-Class': !isOpen}">isOpen</div>
1

you can use either by two ways (mostly preferred ngClass)

Working Demo

using ng-class (ngClass)

        <li ng-class="{'active': panel.active, 'inactive': !panel.active}">{{panel.title}}</li>

Working Demo

using class

        <li class="nav-tab {{panel.active==true?'active':''}}" ng-repeat="panel in panels" >{{panel.title}}</li>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.