准备循环中的链接

Question

有一组对象。我解决了它的循环。在两个系列中获得 link 图像？ vm.data.list- 对象数组。循环：

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

在获取图像的 links 的周期中？ (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 等)

我试过这样做：

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

您需要使用 ng-src 而不是 src：https://docs.angularjs.org/api/ng/directive/ngSrc。 Angular 将首先计算 ng-src 值，然后为您构建 src。

这是一个基本示例：jsfiddle:

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

在你的情况下，使用：

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

除了 ng-src，请注意：

以协议或斜杠以外的其他内容开头的 url 是 relative：它将根据当前页面的上下文进行解析。在你的情况下，不要忘记开头的 http:// !
link 中的所有 angular 表达式都应该在括号内：{{item}}.weather[0] 不起作用

准备循环中的链接

Preparation of links in the loop

angularjs

cycle