Inline-logic in templates in AngularJS

Question

Inline-logic in templates in AngularJS

Is there any way to write logic inline in a template in AngularJS.

What I want to do is something like this:

<div ng-repeat="item in items">
    {{item.isValid ? 'Valid item' : 'Invalid Item'}}
</div>

templates
angularjs

Answer 1

You can use && and ||, which will end up working just like the ternary operators.

{{item.isValid && 'Valid' || 'Invalid' }}

EDIT: Angular introduced ternary operators in 1.1.5:

{{item.isValid ? 'Valid' : 'Invalid' }}

Answer 2

You can't use conditionals in angular expressions. And, if your div content is light (just text), you might want to use ng-bind (it also saves you from having additional span element):

<div ng-repeat="item in items" ng-bind="{true: 'Valid item', false: 'Invalid item'}[item.isValid]"></div>

Answer 3

You can insert a span with ng-show to show your conditional text

Example

<div ng-repeat="item in items">
    <span ng-show="item.isValid">
           Valid item
    </span>
    <span ng-show="!item.isValid">
           Invalid item
    </span> 
</div>