Dmitry Dmitry - 12 days ago 5
AngularJS Question

Preparation of links in the loop

There is an array of objects. I sort out of its loop.
In both series to get a link to the image?
vm.data.list- array of object.
Loop:

<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>


As in the cycle of getting links to the 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 and other)

I tried to do so:

<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>

Answer

you need to use ng-src instead of src: https://docs.angularjs.org/api/ng/directive/ngSrc. Angular will first compute the ng-src value and then construct the src for you.

Here is a basic example: jsfiddle:

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

In your case, use :

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

Aside from the ng-src, be aware that:

  • an url beginning with something else than a protocol or a slash is relative: it will be resolved against the context of the current page. In your case, don't forget the http:// at the beginning !
  • all the angular expression inside the link should be inside the brackets: {{item}}.weather[0] won't work