CODEWITHSUNDEEP
angularjs
vsoni
vsoni

Reputation: 497

How to use if else with AngularJS

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();
    }
  });```

Upvotes: 1

Views: 559

Answers (3)

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 3

vsoni
vsoni

Reputation: 497

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

Upvotes: 1

Nawnit Sen
Nawnit Sen

Reputation: 1038

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

Upvotes: 2

Related Questions