ng-Class - 多个条件和类

时间:2015-01-28 18:03:49

标签: javascript angularjs ng-class

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

  

ng-class =“isSelected?'side_menu_link_active':   'side_menu_link_disabled',pageSelected =='讲座'? 'link_active'   :'link_disabled'“

有谁知道这个的正确语法? 感谢。

2 个答案:

答案 0 :(得分:7)

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

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

使用您的班级名称的示例:

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

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

$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)"

答案 1 :(得分:1)

您可以通过逗号分隔

来完成此操作
<div ng-class="{'isClicked1' : click, 'isClicked2' :!click}">

查看我的工作 jsfiidle