Search code examples
angularjscycle

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>

Solution

  • 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