Вопрос

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"

Это было полезно?

Решение

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.

Другие советы

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>

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top