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.
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 comma separation
<div ng-class="{'isClicked1' : click, 'isClicked2' :!click}">
See my working jsfiidle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With