1
votes

Comment utiliser if else avec AngularJS

J'essaie d'utiliser if else avec angular pour filtrer les images du contrôleur. J'essaie de montrer l'image avec ma liste si elle existe et sinon elle montre l'image d'espace réservé.Je suis nouveau à angular peut quelqu'un s'il vous plaît guider.

J'ai essayé des solutions en ligne à utiliser avec lui comme

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

J'ai créé ce composant que j'essaie d'appeler dans mon fichier d'index. Je ne suis pas non plus en mesure d'afficher les dates qui fonctionnaient avant de le transférer dans le composant. Je pense qu'il y a quelque chose qui ne va pas avec les virgules. {{date | date: "EEE MMM jj aaaa"}}

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


5 commentaires

Qu'est-ce que ng-src? Voulez-vous utiliser [src] = “item.icon” ? Pour définir l'attribut src sur une valeur dynamique?


Je pense que ng-src est la directive angulaire pour afficher la source de l'image dans l'application. Je pense que cela peut être similaire à [src] je crois


ng-src est la directive angularjs. * ngIf est une directive angulaire. On dirait que vous faites des angularjs? Lequel aurait dû être ng-if ?


Veuillez préciser quelle version d'Angular vous utilisez spécifiquement.


Je pense que j'utilise AngularJs 1.7.x


3 Réponses :


2
votes

Votre code est en angularJS et dans angularJS il n'y a pas de chose telle que ng-else qui soit en angular. Pour faire ce travail, vous pouvez utiliser ng-if ou ng-show de angularJS.

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

Ce qu'il fera est si l'icône est La première image actuelle sera affichée avec item.icon comme URL d'image et si ce n'est pas le cas dans la deuxième balise img sera vraie et la seconde sera affichée avec une image d'espace réservé p >


0 commentaires

3
votes

Au lieu d'utiliser ng-if , utilisez simplement une expression:

COMPLIQUÉ

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

Simpler

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

Pour plus d'informations, voir


2 commentaires

C'est génial en termes de simplicité. Je pensais utiliser un simple ternaire mais cela le bat à des kilomètres: D: D


Merci, cela fonctionne avec quelques modifications dans l'objet de données du contrôleur.



1
votes

Je l'ai fait fonctionner via l'expression ci-dessous.

Cependant, je dois apporter quelques modifications au contrôleur à partir duquel il affiche les données

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

Au lieu de cela, c'est en dehors du premier tableau que je dois mettre l'image d'espace réservé à l'intérieur du tableau

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


1 commentaires

Si l'espace réservé est en dehors du tableau, utilisez . Ou utilisez une chaîne littérale,