How to use if else with AngularJS

Question

I am trying to use if else with angular to filter the images from the controller. I am trying to show the image with my list if it exists and if not it show the placeholder image.I am new to angular can someone please guide.

I have tried some online solutions to use with it like

 <div *ngIf="{{item.icon}}; else templateName">
   <img ng-src = "{{item.icon}}" />
 </div>
 <ng-template #templateName>
    <img ng-src = "{{item.placeholderImage}}" />
  </ng-template>

I have created this component which I am trying to call in my index file. I am also not able to display the dates which was working before I transferred it in the component. I think there is something wrong with the commas. {{date | date:"EEE MMM dd yyyy"}}

  module('cListApp').
  component('itemsList', {
    template:<ul> 
    <li class="list-body-container" ng-repeat="item in $ctrl.items"> 
        <div class="profileImage"> 

        </div> 
        <div class="list-body-left"> 
            <div class="li-title"><h2>{{item.name}}</h2><h4>Title3</h4></div> 
            <div class="li-body"><p>{{item.snippet}}</p></div> 
            <div class="li-date"> 
                <div id="calendar"> 
                    <div id="c-top"> 
                        <span id="l1"></span> 
                        <span id="l2"></span> 
                    </div> 
                    <div id="c-mark"></div> 
                </div> 
                {{date | date:"EEE MMM dd yyyy"}}
            </div>
        </div>
        <div class="list-body-right">
        </div>
    </li>
</ul>,
controller: function cListController() {
      this.items = [
        {
            name: 'Nexus S',
            snippet: 'Fast just got faster with Nexus S.',
            icon: 'https://picsum.photos/100/100/?image=491'
        }, {
            name: 'Motorola XOOM™ with Wi-Fi',
            snippet: 'The Next, Next Generation tablet.'

        }, 

      ],
      this.placeholderImage = 'https://picsum.photos/100/100/?blur',
      this.date = new Date();
    }
  });```

What is ng-src? Do you mean to use [src]=“item.icon”? To set src attribute to a dynamic value? — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 18, 2019 at 2:09
I think ng-src is the angular directive to show Image source in the application. I think it may be similar to [src] i believe — vsoni
– vsoni, Commented Apr 18, 2019 at 2:11
ng-src is angularjs directive. *ngIf is angular directive. Looks like you're doing angularjs? Which should of been ng-if? — penleychan
– penleychan, Commented Apr 18, 2019 at 2:25
Please clarify what version of Angular you are specifically using. — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 18, 2019 at 2:43

georgeawg · Accepted Answer · 2019-04-18 13:42:16Z

3

Instead of using ng-if, simply use an expression:

COMPLICATED

<div>
   <img ng-if="item.icon"   ng-src = "{{item.icon}}" />
   <img ng-if="!item.icon"  ng-src = "{{$ctrl.placeholderImage}}" />
</div>

Simpler

<img ng-src = "{{item.icon || $ctrl.placeholderImage}}" />

For more information, see

MDN JavaScript Reference - Logical Operators

edited Apr 18, 2019 at 13:42

answered Apr 18, 2019 at 6:41

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dblaze47 Over a year ago

This is awesome in terms of simplicity. I was thinking of using a simple ternary but this beats it by miles :D :D

vsoni Over a year ago

Thanks this does work with some modifications in the controller data object.

Nawnit Sen · Accepted Answer · 2019-04-18 02:55:29Z

2

Your code is in angularJS and in angularJS there is no such thing as ng-else that is in angular. To make this work you can use ng-if or ng-show of angularJS.

<div>
   <img ng-if="item.icon"   ng-src = "{{item.icon}}" />
  <img ng-if="!item.icon"  ng-src = "{{item.placeholderImage}}" />
 </div>

What it will do is if icon is present first image will be shown with item.icon as image URL and if not condition in second img tag will be true and second one will be shown with placeholder image

answered Apr 18, 2019 at 2:55

Nawnit Sen

1,0482 gold badges8 silver badges15 bronze badges

Comments

vsoni · Accepted Answer · 2019-04-18 12:44:58Z

1

I have got this working via below expression.

<img ng-src = "{{item.icon || item.placeholderImage}}" />

However, I have to make few changes to the controller from where it shows the data

controller: function cListController() {
      this.items = [
        {
            name: 'Nexus S',
            snippet: 'Fast just got faster with Nexus S.',
            icon: 'https://picsum.photos/100/100/?image=491'
        }, {
            name: 'Motorola XOOM™ with Wi-Fi',
            snippet: 'The Next, Next Generation tablet.'
        }, 

      ],
      this.placeholderImage = 'https://picsum.photos/100/100/?blur',
      this.date = new Date();
    }

Instead it's outside of first array I have to put the placeholder image inside the array

{
 name: 'Nexus S',
 snippet: 'Fast just got faster with Nexus S.',
 icon: 'https://picsum.photos/100/100/?image=491'
},
{
  name: 'Motorola XOOM™ with Wi-Fi',
  snippet: 'The Next, Next Generation tablet.',
  placeholderImage = 'https://picsum.photos/100/100/?blur',
},

answered Apr 18, 2019 at 12:44

vsoni

4971 gold badge7 silver badges23 bronze badges

1 Comment

georgeawg Over a year ago

If the placeholder is outside the array, use <img ng-src = "{{item.icon || $ctrl.placeholderImage}}" />. Or use a string literal, <img ng-src = "{{item.icon || 'https://picsum.photos/100/100/?blur'}}" />

Collectives™ on Stack Overflow

How to use if else with AngularJS

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related