javascript - ng-Class - multiple conditions and classes - Stack Overflow

admin管理员组

文章数量:1279090

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="isSelected ? 'side_menu_link_active' : 'side_menu_link_disabled' , pageSelected =='lectures' ? 'link_active' : 'link_disabled'"

Does anyone knows the correct syntax for this? thanks.

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="isSelected ? 'side_menu_link_active' : 'side_menu_link_disabled' , pageSelected =='lectures' ? 'link_active' : 'link_disabled'"

Does anyone knows the correct syntax for this? thanks.

• javascript
• angularjs
• ng-class

Share Improve this question Follow asked Jan 28, 2015 at 18:03 Diogo BarrosoDiogo Barroso 91533 gold badges99 silver badges2222 bronze badges 1

• see my updated answer below. – SoluableNonagon Commented Jan 28, 2015 at 18:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

You can do this by ma separation

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

See my working jsfiidle

本文标签： javascriptngClassmultiple conditions and classesStack Overflow