Question

我是angularjs的新手我想创建一个标签，所以我创建了一个像这样的内容数组

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

    ]

以下是我实现循环的方法

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

现在，我需要通过在active为true时添加活动类来突出显示活动选项卡。如何添加if(active== true)，那么类应该像 class =＆＃34; nav-tab active＆＃34;

Answer 1

您需要做的就是使用ng-class directive。

以下代码适合您：

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

请注意，如果您的班级有-（名称中有破折号），那么您必须将班级名称换成引号（''），例如ng-class="{'active-class':panel.active}"。

我希望这会有所帮助。

Answer 2

您可以通过两种方式使用（主要是首选ngClass）

<强> Working Demo

使用ng-class（ngClass）

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

<强> Working Demo

使用class

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

Answer 3

查看ng-class，

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

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

angularjs ngrepeat和ngif

3 个答案: