Else if in angular js template

Question

I need to use else if in angularjs template .What is the syntax ? For example in c i would write the code like below:

if (data.sender=='system')
{data.receiver}
else if (data.sender=='mail')
{data.receiver} 
else {data.sender}

My code:

{{data.sender == 'System' ? data.receiver : ' '}}

{{data.sender =='mail' ? data.receiver : data.sender  }}

btw your second snippet is in contradiction with the first... — holographic-principle, Jan 01 '15 at 16:45

score 14 · Accepted Answer · answered Jan 01 '15 at 16:42

14

{{(data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender}}

answered Jan 01 '15 at 16:42

hjl

2,794
3
18
26

You probably should think of making a filter instead of nested ternary operators. – David Karlsson Jan 01 '15 at 16:44
yes this answer is only to OP's case, but not general – hjl Jan 01 '15 at 16:47
Thanks i was making the logic complex! – query Jan 01 '15 at 18:50
What is I have 3 different cases, this won't work. – Saif Badran Oct 28 '18 at 18:19

score 8 · Answer 2 · answered Jan 01 '15 at 17:25

There are no if-else syntax in angular templates as you are looking for. Too much logic in the templates makes it difficult to maintain. Here are two possible solutions:

<span ng-show="data.sender == 'mail' || data.sender=='system'">{{data.receiver}}</span>
<span ng-show="data.sender != 'mail' && data.sender!='system'">{{data.sender}}</span>

You can also use ng-switch in a similar way:

<span ng-switch="data.sender">
    <span ng-switch-when="mail">{{data.receiver}}</span>
    <span ng-switch-when="system">{{data.receiver}}</span>
    <span ng-switch-default>{{data.sender}}</span>
</span>

The later having the advantage that only one of the spans will exist in the document where ng-show/ng-hide all spans exist in the document they are just hidden using display:none.

Other options would be writing your own directive, or creating special filters.

score 2 · Answer 3 · answered Jan 01 '15 at 16:40

2

Here it is, but you should really try to avoid having this kind of complicated logic inside of templates, as a rule of thumb.

{{ data.sender == 'system' ? data.receiver : data.sender == 'mail' ? data.receiver : data.sender }}

answered Jan 01 '15 at 16:40

holographic-principle

19,688
10
46
62

Andres · Answer 4 · 2015-01-01T17:02:41.883

If you need an elseif in angular template you can use a ternary operator as in C/C++

 {{ data.sender=='system'
< 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}}

angular.module('quetion_app', []);

angular.module('quetion_app').controller('quertion_controller', ['$scope',
  function($scope) {

    $scope.data = {
      sender: 'some sender',
      receiver: 'somebody'
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="quetion_app">

  <div ng-controller="quertion_controller">
    {{data}}
    <br>
    <br>
    {{ data.sender=='system'
    < 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}} </div>

  </div>

Change data.sender in snippet to check the behavior

Hope it helps

score 1 · Answer 5 · answered Jan 01 '15 at 17:36

This type of logic really belongs in the controller or service which is responsible for setting up data in your $scope. Placing it in your view brings a lot of logic in to the view unnecessarily and also causes that logic to be run as a watch which both expensive and unnecessary.

In the code that establishes data you could have:

data.displayedSender = (data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender;

Then in your view you bind to the data.displayed sender:

<span>{{data.displayedSender}}</span>

Else if in angular js template

5 Answers5