AngularJS ng-style with a conditional expression

by

simple example:

<div ng-style="isTrue && {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"></div>

{‘background-color’:’green’} RETURN true

OR the same result: 

<div ng-style="isTrue && {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

other conditional possibility:

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. When to favor ng-if vs. ng-show/ng-hide?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How to use the ‘replace’ feature for custom AngularJS directives?
  5. Link vs compile vs controller
  6. Angular.js directive dynamic templateURL
  7. What is the best way to conditionally apply attributes in AngularJS?
  8. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  9. Unit Testing AngularJS directive with templateUrl
  10. Angularjs loading screen on ajax request
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Angular: calling controller function inside a directive link function using &
  13. How to allow only a number (digits and decimal point) to be typed in an input?
  14. Angular directive how to add an attribute to the element?
  15. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  16. get original element from ng-click
  17. angular directive encapsulating a delay for ng-change
  18. angularjs share data config between controllers
  19. AngularJS watch DOM change
  20. How do I apply an AngularJS directive based on a class set by ng-class?
  21. AngularJS leaves comments in HTML: is it possible to remove them?
  22. When to use the AngularJS `$onInit` Life-Cycle Hook
  23. AngularJS – how to override directive ngClick
  24. AngularJS: ngInclude vs directive
  25. Angular directive name: only lower case letters allowed?
  26. What is ng-transclude?
  27. How to detect browser using angularjs?
  28. AngularJS. Convert tag value (Unix time to human-readable time)
  29. When to use double braces {{}} in angularJS
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment