Ternary operator in AngularJS templates

Question

How do you do a ternary with AngularJS  in the templates    It would be nice to use some in html attributes  classes and style  instead of creating and calling a function of the controller

User · Accepted Answer

Update  Angular 1 1 5 added a ternary operator  so now we can simply write   lt li ng-class   first    firstRow     nonFirstRow   gt      If you are using an earlier version of Angular  your two choices are     condition  amp  amp  result if true     condition  amp  amp  result if false   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     lt li class     true   myClass1 myClass2   false       first     gt     lt  li gt   or  lt li ng-class   true   myClass1 myClass2   false       first   gt     lt  li gt     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    a string of space-delimited class names an array of class names 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     lt li ng-class   myClass   first  anotherClass   index    2   gt     lt  li gt    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      lt li ng-style   true   color   red    false       first   gt     lt  li gt

User · Answer

While you can use the condition  amp  amp  if-true-part    if-false-part-syntax in older versions of angular  the usual ternary operator condition   true-part   false-part is available in Angular 1 1 5 and later

User · Answer

lt body ng-app  app  gt     lt button type  button  ng-click  showme  true    showme  showme message  Cancel Quiz    class  btn btn-default  gt   showme  true    Cancel Quiz    Take a Quiz    lt  button gt       lt div ng-show  showme  class  panel panel-primary col-sm-4  style  margin-left 250px   gt         lt div class  panel-heading  gt Take Quiz lt  div gt         lt div class  form-group col-sm-8 form-inline  style  margin-top  30px margin-bottom  30px   gt            lt button type  button  class  btn btn-default  gt Start Quiz lt  button gt         lt  div gt       lt  div gt     lt  body gt    Button toggle and change header of button and show hide div panel  See the Plunkr

User · Answer

This answer predates version 1 1 5 where a proper ternary in the  parse function wasn t available  Use this answer if you re on a lower version  or as an example of filters  angular module  myApp filters             filter  conditional   function         return function condition  ifTrue  ifFalse          return condition   ifTrue   ifFalse                And then use it as  lt i ng-class  quot checked   conditional  icon-check   icon-check-empty  quot  gt  lt  i gt

User · Answer

For texts in angular template  userType is property of  scope  like  scope userType     lt span gt      userType   admin     Edit     Show     lt  span gt

User · Answer

Update  Angular 1 1 5 added a ternary operator  this answer is correct only to versions preceding 1 1 5  For 1 1 5 and later  see the currently accepted answer   Before  Angular 1 1 5    The form of a ternary in angularjs is     condition   amp  amp   answer if true      answer if false     An example would be    lt ul class  nav  gt       lt li gt           lt a   href    page1  style     location path      page2   amp  amp   color  fff       color  000      gt Goals lt  a gt       lt  li gt       lt li gt           lt a   href    page2  style     location path      page2   amp  amp   color  fff       color  000      gt Groups lt  a gt       lt  li gt   lt  ul gt    or     lt li  ng-disabled  currentPage    0  ng-click  currentPage 0   class     currentPage    0   amp  amp   disabled           gt  lt a gt   lt  lt   lt  a gt  lt  li gt

User · Answer

There it is   ternary operator got added to angular parser in 1 1 5  see the changelog  Here is a fiddle showing new ternary operator used in ng-class directive   ng-class  boolForTernary    blue     red

[javascript] Ternary operator in AngularJS templates

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to ternary-operator