Question

我正在尝试使用是否带有角度过滤来自控制器的图像。我正在尝试通过列表显示图像，如果不存在则显示占位符图像。

我尝试了一些在线解决方案，例如

 <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 Reference - Logical Operators

Answer 2

您的代码在angularJS中，而在angularJS中没有ng-else这样的东西。为此，您可以使用angularJS的ng-if或ng-show。

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

它的作用是，如果存在图标，则第一张图像将以 item.icon 作为图像URL显示，如果没有，则在第二张 img 标签中设置为true，并且第二个将与占位符图像一起显示

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

如何在AngularJS中使用if else

3 个答案: