2016-11-28 1 views
0

Il y a un tableau d'objets. Je trier de sa boucle. Dans les deux séries pour obtenir un lien vers l'image? vm.data.list- tableau d'objet. Loop:Préparation des liens dans la boucle

<tr ng-repeat="item in vm.data.list"> 
       <td ng-bind="item.temp.day"></td> 
       <td ng-bind="vm.symbal"></td> 
       <td ng-bind-template="{{ item.humidity }} %"></td> 
         </tr> 

Comme dans le cycle d'obtenir des liens à l'image? (http://openweathermap.org/img/w/vm.data.list[0].weather[0].icon.png, http://openweathermap.org/img/w/vm.data.list[1].weather[0].icon.png et autres)

J'ai essayé de le faire:

<tr ng-repeat="item in vm.data.list"> 
       <td ng-bind="item.temp.day"></td> 
       <td ng-bind="vm.symbal"></td> 
       <td ng-bind-template="{{ item.humidity }} %"></td> 
     <!--  <td img ng-src="http://openweathermap.org/img/w/{{item.weather[0].icon.png}}">--> 
       <td> <img src=http://openweathermap.org/img/w/{{item}}.weather[0].icon.png></td> 
       </tr> 

Répondre

0

vous devez utiliser ng-src au lieu de src: https://docs.angularjs.org/api/ng/directive/ngSrc. Angular calcule d'abord la valeur ng-src puis construit le src pour vous.

Voici un exemple de base: jsfiddle:

<div ng-repeat="item in items"> 
    <img ng-src="http://www.w3schools.com/{{item.f.folders[0]}}/{{item.name}}"> 
</div> 

Dans votre cas, utilisez:

<img ng-src="http://openweathermap.org/img/w{{item.weather[0].icon}}.png‌​"> 

Mis à part le ng-src, sachez que:

  • une début url avec quelque chose d'autre qu'un protocole ou une barre oblique est par rapport: il b e résolu par rapport au contexte de la page en cours. Dans votre cas, ne pas oublier le http: // au début!
  • toute l'expression angulaire à l'intérieur du lien doit être à l'intérieur des parenthèses: {{item}}.weather[0] ne fonctionnera pas
+0

Comme cela? -> Dmitry

+0

Comme ça? Ne fonctionne pas. – Dmitry

+0

voir ma réponse modifiée. Toute l'expression angulaire devrait être à l'intérieur du {{}}. – Derlin