Ternary operator in AngularJS templates

by

Update: Angular 1.1.5 added a ternary operator, so now we can simply write

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

If you are using an earlier version of Angular, your two choices are:

  1. (condition && result_if_true || !condition && result_if_false)
  2. {true: 'result_if_true', false: 'result_if_false'}[condition]

item 2. above creates an object with two properties. The array syntax is used to select either the property with name true or the property with name false, and return the associated value.

E.g.,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$first is set to true inside an ng-repeat for the first element, so the above would apply class ‘myClass1’ and ‘myClass2’ only the first time through the loop.

With ng-class there is an easier way though: ng-class takes an expression that must evaluate to one of the following:

  1. a string of space-delimited class names
  2. an array of class names
  3. a map/object of class names to boolean values.

An example of 1) was given above. Here is an example of 3, which I think reads much better:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

The first time through an ng-repeat loop, class myClass is added. The 3rd time through ($index starts at 0), class anotherClass is added.

ng-style takes an expression that must evaluate to a map/object of CSS style names to CSS values. E.g.,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

More Related Contents:

  1. Can one AngularJS controller call another?
  2. Way to ng-repeat defined number of times instead of repeating over array?
  3. How to set an iframe src attribute from a variable in AngularJS
  4. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  5. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  6. Losing scope when using ng-include
  7. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  8. How to pass parameters using ui-sref in ui-router to the controller
  9. How to make ng-bind-html compile angularjs code
  10. What is the correct syntax of ng-include?
  11. angularjs to output plain text instead of html
  12. AngularJS – ng-disabled not working for Anchor tag
  13. Set active tab style with AngularJS
  14. Image loaded event in for ng-src in AngularJS
  15. Template does not update when using ui-router and ion-tabs
  16. How do I disable the save password bubble in chrome using Javascript?
  17. How to remove an item from an array in AngularJS scope?
  18. CSS: Change parent on focus of child
  19. AngularJS – placeholder for empty result from filter
  20. Angular form validation ng-disabled not working
  21. angularjs custom filter to check for values inside a data array
  22. Webstorm: “Cannot Resolve Directory”
  23. AngularJS using $rootScope as a data store
  24. angularjs form reset error
  25. AngularJs – Best-Practices on adding an active class on click (ng-repeat)
  26. How can I invoke encodeURIComponent from angularJS template?
  27. Clear localStorage on tab/browser close but not on refresh
  28. Rename Object Key in an array using javascript
  29. multiple ui-view html files in ui-router
  30. Decode HTML entity in Angular JS

Leave a Comment