Adding multiple class using ng-class

by

To apply different classes when different expressions evaluate to true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

To apply multiple classes when an expression holds true:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

or quite simply:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Notice the single quotes surrounding css classes.

More Related Contents:

  1. AngularJS ng-class if-else expression
  2. Is this a “Deferred Antipattern”?
  3. angular.service vs angular.factory
  4. AngularJS – UI-router – How to configure dynamic views
  5. Calculating sum of repeated elements in AngularJS ng-repeat
  6. Unit Testing AngularJS directive with templateUrl
  7. How to use ng-class in select with ng-options
  8. Can an AngularJS controller inherit from another controller in the same module?
  9. getting the ng-object selected with ng-change
  10. Limit the length of a string with AngularJS
  11. AngularJS : Custom filters and ng-repeat
  12. inline conditionals in angular.js
  13. angular directive encapsulating a delay for ng-change
  14. Angular: ng-bind-html filters out ng-click?
  15. How can I test an AngularJS service from the console?
  16. Angularjs ui-router. How to redirect to login page
  17. localStorage vs sessionStorage vs cookies
  18. Send multipart/form-data files with angular using $http
  19. AngularJS leaves comments in HTML: is it possible to remove them?
  20. ng-options with disabled rows
  21. Usage of $broadcast(), $emit() And $on() in AngularJS
  22. How/when to use ng-click to call a route?
  23. How to handle $resource service errors in AngularJS
  24. AngularJS: ngInclude vs directive
  25. How to create a AngularJS promise from a callback-based API
  26. Fontawesome is not working when project is built with grunt
  27. angularjs text area character counter
  28. How to ‘unwatch’ an expression
  29. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  30. scope and controller instantiation with ui router

Leave a Comment