Блог

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

Вместо использования 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 — логические операторы

Ваш код написан на AngularJS, а в AngularJS нет такого понятия, как ng-else в angular. Чтобы сделать эту работу, вы можете использовать ng-if or 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 будет истинным, а второе будет показано с изображением-заполнителем

У меня это работает с помощью приведенного ниже выражения.

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