Angularjs if-then-else construction in expression

Question

Can I somehow use if-then-else construction (ternary-operator) in angularjs expression, for example I have function $scope.isExists(item) that has to return bool value. I want something like this,

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

I know that I can use function that returns string, I'm interesting in possibility of using if-then-else construction into expression. Thanks.

Solution 1

Angular expressions do not support the ternary operator before 1.1.5, but it can be emulated like this:

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

So in example, something like this would work:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

UPDATE: Angular 1.1.5 added support for ternary operators:

{{myVar === "two" ? "it's true" : "it's false"}}

Solution 2

You can use ternary operator since version 1.1.5 and above like demonstrated in this little plunker (example in 1.1.5):

For history reasons (maybe plnkr.co get down for some reason in the future) here is the main code of my example:

{{true?true:false}}

Solution 3

You can easily use ng-show such as :

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

For more complex tests, you can use ng-switch statements :

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

Comments

[NilsH]

Check out ng-switch

[nilskp]

Since 1.2 this is now supported.

[Supr]

An advantage of doing it at the element level like this instead of inside the expression is that you can customize the style and content of the different options much more.

[IgorCh]

Yes, I know about this functionality it could help, but I don't want to add extra div to the document. but also thanks

[0xcaff]

Does && need to be escaped?

[Sebastian]

For history reasons (maybe plnkr.co get down for some reason in the future) here is the main code of my example: {{true?true:false}}

[Sebastian]

@caffinatedmonkey no you must not. You could (if possible for your project) use the ternary operator like I explained in my answer to the topic question.

[0xcaff]

@Sebastian What about < and > as comparison operators?

[Sebastian]

@caffinatedmonkey No problem also, {{1>0?true:false}} or {{1>0}} whatever you like. {{1>0}} works also in 1.0.8, but ternary operator does not.

[Immutable Brick]

Exactly what I was looking for thank you, almost used a filter to do this.

[Răzvan Flavius Panda]

@IgorCh: You might want to update the accepted answer :)

[Olga Gnatenko]

This is still a great answer since it works inside the settings of angular-ui components (while ternary operator does not work there on some reason). Maybe this helps someone struggling to set angular-ui parameters