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>
3 Réponses :
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 >
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
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.
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(); }
Si l'espace réservé est en dehors du tableau, utilisez
. Ou utilisez une chaîne littérale,
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û êtreng-if
?Veuillez préciser quelle version d'Angular vous utilisez spécifiquement.
Je pense que j'utilise AngularJs 1.7.x