使用ng-class添加多个类


542

我们可以有多个表达式来添加多个ng-class吗?

例如

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

如果是,那么任何人都可以举这个例子。


17
您的示例按原样工作。
史蒂夫·克洛斯特斯(SteveKlösters)2013年

是的,确实如此,我只需要在CSS中使用!important使其可见即可。我自己找到的:)
Aditya Sethi 2013年

@stevuu说的话..是ri8 ...您的问题是答案
YaswanthJg 2015年

值expressionData1通常采用true / false还是某些实际的字符串值?
Martian2049'9

Answers:


978

在不同的表达式求和时应用不同的类true

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

在表达式为真时应用多个类:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

或者很简单:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

注意css类周围的单引号。


11
您不能像ng-class =“ {'class1 class2':expression1}”那样传递多个类,只是测试它并且根本不起作用,解决方案就像@CodeHater所说的“当表达式为true时应用多个类:”诀窍
d1jhoni1b 2014年

8
在1.2.16中,多类选项('class1 class2': expression)似乎可以正常工作,不同之处在于,如果重用一个类,则当表达式在选项之间切换时,它会被删除。例如,'commonClass class1': expression == true, 'commonClass class2': expression == false随着表达式在true和false之间切换,将会丢失commonClass。
BrianS

10
@BrianS我会做这样的事情:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner 2014年

@CodeHater谢谢。那就是我现在正在计划的东西,只需要花一点时间来修复CSS。
BrianS 2014年

ng-class="{'class1' : expression1, 'class2':expression1 }"可能吗 你介意看我的问题 stackoverflow.com/questions/25391692/...
Danger14

48

对于三元运算符表示法:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

这对我不起作用。<span ng-class =“ params.isAdmin?'fa fa-lock fa-2x':'fa fa-unlock fa-2x'”> </ span>。控制台将引发错误。
TommyQu '17

使用这种方法,我可以添加另一个表达式吗?
徒步Nalbandyan

6
@HikeNalbandyan是的,您也可以添加另一个表达式:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man

47

是的,您可以使用多个表达式在ng-class中添加多个类。

例如:

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

45

这是其他答案的强大替代方法:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

一些例子:

1.只需在div中添加“ class1 class2 class3”:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

2.根据$ index,向div添加“ odd”或“ even”类:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

3.根据$ index为每个div动态创建一个类

<div ng-class="[{true:'index'+$index}[true]]"></div>

如果$index=5这将导致:

<div class="index5"></div>

这是您可以运行的代码示例:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 
.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>


2
辉煌的答案!我一直将函数用于更复杂的ng-class指令,例如,当我需要在同一元素上应用三元和标准表达式时。我已对接受的答案进行了修改,以包括表达式数组的使用。
Daniel Bonnell

我不是Angular专家,但似乎这个结构:[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]可以像这样简化['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]。我刚刚在Angular 1.5.9中尝试了它,它的效果很不错:)感谢您的出色回答!
vadipp

30

使用$scope控制器上的方法,可以计算要在视图中输出的类。如果您具有用于计算类名的复杂逻辑,并且通过将其移至控制器来减少视图中的逻辑量,这尤其方便。

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

在视图中,只需:

<div ng-class="className()"></div>

1
如果类在渲染后发生变化,那么ng-class还在监听className吗?
remarsh

3
恕我直言,范围应该只暴露条件。应该由HTML ng-绑定决定在满足该条件时要使用哪个
Alnitak

1
这将覆盖dom元素中的class属性。如果使用此方法,则必须在返回的值中包含不需要条件的类className
phuwin

20

您的示例适用于条件类(如果expressionDataXtrue,则显示类名):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

您还可以添加由元素的用户提供的多个类:

<div ng-class="[class1, class2]"></div>

用法:

<div class="foo bar" class1="foo" class2="bar"></div>


3
您是否知道可以组合两种类型的模板,即使用条件类{}和使用数据绑定类[]
jwg 2014年

3
据我所知这是不可能的。同样,不可能ngClass在一个元素上放置两个指令。
2014年

谢谢!这似乎在其他地方得到了证实。
jwg 2014年

2
您会感到惊讶:<a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>以及更多:scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
mayankcpdixit 2014年

1
:@jwg:您可以将两种类型的模板ANS是这里stackoverflow.com/questions/29230732/...
萨蒂什·库马尔·V

12

这是一个使用OR ||比较多个angular-ui-router状态的示例。操作员:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

它会根据是否满足条件,为锂电池提供警告和/或激活状态。


我真的不记得了。是不是很合逻辑?
nitech

感谢您澄清,只要满足它们的每个条件,就可以从同一个ng-class块中应用多个类。
cedricdlb

6

在active和activemenu下面是类,而itemCount和ShowCart是表达式/布尔值。

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

5

有多个条件

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>


3

我们可以通过其他方式创建一个函数来控制“使用多个类”

的CSS

 <style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
    .b {
         font-weight: bold;
    }
</style>

脚本

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

使用它

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>

您可以参考ng-class的完整代码页(例如)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.