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
ng-Class - multiple conditions and classes
提问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)"