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.

Check out [`ng-switch`](http://docs.angularjs.org/api/ng.directive:ngSwitch) — NilsH, May 16 '13 at 09:58

score 222 · Accepted Answer · edited Oct 29 '14 at 18:43

222

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"}}

edited Oct 29 '14 at 18:43

Rafael Almeida

10,352
6
45
60

answered May 16 '13 at 11:16

Andre Goncalves

3,840
2
21
15

Does && need to be escaped? – 0xcaff Mar 16 '14 at 15:45
@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. – Sebastian Apr 24 '14 at 12:35
@Sebastian What about `<` and `>` as comparison operators? – 0xcaff Apr 25 '14 at 23:20
@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. – Sebastian Apr 28 '14 at 08:37
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 – Olga Gnatenko Jul 25 '14 at 11:06

Sebastian · Answer 2 · 2017-03-28T07:37:47.577

41

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}}

edited Mar 28 '17 at 07:37

answered Feb 20 '14 at 14:42

Sebastian

2,874
25
31

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 Apr 24 '14 at 12:33
1

Exactly what I was looking for thank you, almost used a filter to do this. – Immutable Brick May 22 '14 at 08:50
1

@IgorCh: You might want to update the accepted answer :) – Răzvan Flavius Panda May 28 '14 at 18:54

score 25 · Answer 3 · answered May 16 '13 at 10:04

25

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>

answered May 16 '13 at 10:04

Mickael

5,711
2
26
22

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. – Supr May 16 '13 at 10:24
Yes, I know about this functionality it could help, but I don't want to add extra div to the document. but also thanks – IgorCh May 16 '13 at 13:03

score 0 · Answer 4 · edited Apr 17 '19 at 20:13

0

This can be done in one line.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Usage in a td tag:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>

edited Apr 17 '19 at 20:13

Wai Ha Lee

8,598
83
57
92

answered Apr 17 '19 at 19:52

Consule

1,059
12
12

score 0 · Answer 5 · answered Aug 21 '20 at 08:10

I am trying to check if a key exist in an array in angular way and landed here on this question. In my Angularjs 1.4 ternary operator worked like below

{{ CONDITION ? TRUE : FALSE }}

hence for the array key exist i did a simple JS check

Solution 1 : {{ array['key'] !== undefined ? array['key'] : 'n/a' }}

Solution 2 : {{ "key" in array ? array['key'] : 'n/a' }}

Angularjs if-then-else construction in expression

5 Answers5

Linked

Related