ng-Class

Question

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

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

有人知道这个的正确语法吗？谢谢。

Answer 1

如果您需要多个条件，语法为：

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

使用您的 class 姓名的示例：

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

Answer 2

你可以用逗号分隔

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

看我的作品jsfiidle

ng-Class - 多个条件和类

ng-Class - multiple conditions and classes

javascript

angularjs

ng-Class - 多个条件和 类

ng-Class - multiple conditions and classes

javascript

angularjs

ng-class

ng-Class - 多个条件和类