In AngularJS templates, the ternary operator is used.

Problem

In AngularJS, how can you perform a ternary (in the templates)?

Instead of generating and invoking a controller method, various html properties (classes and style) might be used.

Asked by cricardol

Solution #1

Update: With the addition of the ternary operator in Angular 1.1.5, we can now simply write

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

You have two options if you’re using an older version of Angular:

The second item above generates a two-property object. The array syntax is used to return the corresponding value for either the property with the name true or the property with the name false.

E.g.,

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

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

However, there is a simpler approach with ng-class: ng-class expects an expression to evaluate to one of the following values:

A good example of 1) may be found above. Here’s a third example that I think reads much better:

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

Class myClass is inserted the first time through a ng-repeat loop. The class anotherClass is introduced the third time ($index starts at 0).

An expression is passed to ng-style, which must evaluate to a map/object of CSS style names to CSS values. E.g.,

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

Answered by Mark Rajcok

Solution #2

This solution is correct only for versions prior to 1.1.5 because Angular 1.1.5 added a ternary operator. See the currently approved solution for 1.1.5 and later.

Before Angular 1.1.5:

In angularjs, a ternary takes the following form:

((condition) && (answer if true) || (answer if false))

Here’s an example:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

or:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

Answered by cricardol

Solution #3

For angular template texts (userType is a $scope attribute, like $scope.userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

Answered by Ikrom

Solution #4

While prior versions of angular allow you to utilize the condition && if-true-part || if-false-part-syntax, the standard ternary operator condition? false-part: true-part is only accessible in Angular 1.1.5 and higher.

Answered by Aleksander Blomskøld

Solution #5

This answer was written before version 1.1.5, when the $parse function didn’t have a suitable ternary. If you’re using an older version, or as a filter example, use this answer:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

After that, you can utilize it as

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

Answered by Jan

Post is based on https://stackoverflow.com/questions/12008580/ternary-operator-in-angularjs-templates