javascript ng-Class - 多个条件和类

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28199257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 08:34:20  来源:igfitidea点击:

ng-Class - multiple conditions and classes

javascriptangularjsng-class

提问by Diogo Barroso

I have been looking for examples of multiple conditions in ng-class but I can't find using the same terminology. Here is an example of what I want to achieve.

我一直在寻找 ng-class 中多个条件的示例,但找不到使用相同的术语。这是我想要实现的一个例子。

ng-class="isSelected ? 'side_menu_link_active' : 'side_menu_link_disabled' , pageSelected =='lectures' ? 'link_active' : 'link_disabled'"

ng-class="isSelected ? 'side_menu_link_active' : 'side_menu_link_disabled' , pageSelected =='lectures' ? 'link_active' : 'link_disabled'"

Does anyone knows the correct syntax for this? thanks.

有谁知道正确的语法吗?谢谢。

回答by SoluableNonagon

If you want multiple conditions the syntax is:

如果您需要多个条件,则语法为:

ng-class=" {className: valueToCheckForTruthiness, otherClassName: otherValue  } " 

Example using your class names:

使用您的类名的示例:

ng-class="{side_menu_link_active: isSelected, side_menu_link_disabled: !isSelected, link_active: pageSelected == 'lectures', link_disabled: pageSelected != 'lectures'   }"

You can take this further and generate an object using a function:

您可以更进一步并使用函数生成一个对象:

$scope.classGenerator = function(isSelected, pageSelected){
     var obj = {};
     isSelected ? obj.side_menu_link_active=true : obj.side_menu_link_disabled = false;
     pageSelected == 'lectures' ? obj.link_active = true : obj.link_disabled = false;
     return obj;
}
ng-class="classGenerator(isSelected, pageSelected)"

回答by Nisham Mahsin

You can do this by comma separation

你可以通过逗号分隔来做到这一点

<div ng-class="{'isClicked1' : click, 'isClicked2' :!click}">

See my working jsfiidle

查看我的工作jsfiidle