Как использовать если еще с AngularJS

Question

Я пытаюсь использовать если еще с угловым для фильтрации изображений с контроллера. Я пытаюсь показать изображение с моим списком, если оно существует, а если нет, то показать изображение заполнителя. Я новичок в angular.

Я пробовал использовать некоторые онлайн-решения, например

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

Я создал этот компонент, который я пытаюсь вызвать в моем индексном файле. Я также не могу отобразить даты, которые работали до того, как я перенес его в компонент. Я думаю, что с запятыми что-то не так. {{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();
    }
  });```

Answer 1

Вместо использования ng-if просто используйте выражение:

СЛОЖНО

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

Упрощенно

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

Для получения дополнительной информациисм.

• MDN Справочник по JavaScript - Логические операторы

Answer 2

Ваш код в angularJS, а в angularJS нет такой вещи, как ng-else в угловом.Чтобы сделать эту работу, вы можете использовать ng-if или ng-show angularJS.

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

Что будет делать, если значок присутствует, первое изображение будет показано с item.icon в качестве URL изображения и, если нет, условие во втором теге img будет истинным, а второй будет отображаться с заполнителем image

Answer 3

Я получил это с помощью выражения ниже.

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

Однако мне нужно сделать несколько изменений в контроллере, откуда он показывает данные

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

Вместо этого он находится вне первого массива. Я должен поместить изображение-заполнитель в массив

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