AngularJS ng-class if-else expression

by

Use nested inline if-then statements (Ternary Operators)

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

for example :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

And make sure it’s readable by your colleagues 🙂

More Related Contents:

  1. Adding multiple class using ng-class
  2. Is this a “Deferred Antipattern”?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. Angular HttpPromise: difference between `success`/`error` methods and `then`’s arguments
  5. How do you prevent duplicate user properties in Firebase?
  6. What is the difference between ng-if and ng-show/ng-hide
  7. Link vs compile vs controller
  8. How to format date in angularjs
  9. AngularJS Paging with $location.path but no ngView reload
  10. Angularjs loading screen on ajax request
  11. Angular: calling controller function inside a directive link function using &
  12. Limit the length of a string with AngularJS
  13. inline conditionals in angular.js
  14. Angular, content type is not being sent with $http
  15. angular directive encapsulating a delay for ng-change
  16. Angular: ng-bind-html filters out ng-click?
  17. How can I test an AngularJS service from the console?
  18. Angularjs ui-router. How to redirect to login page
  19. localStorage vs sessionStorage vs cookies
  20. Send multipart/form-data files with angular using $http
  21. AngularJS leaves comments in HTML: is it possible to remove them?
  22. Usage of $broadcast(), $emit() And $on() in AngularJS
  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. How to master AngularJS? [closed]
  27. angularjs 1.x support lifecycle and end-of-life
  28. How to integrate AngularUI to AngularJS?
  29. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  30. Two views in one AngularUI Router state sharing scope

Leave a Comment