Question

有一系列对象。我整理出它的循环。在两个系列中获取图像的链接？ 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>

在获取图像链接的循环中？（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之外，请注意：

以协议或斜杠开头的其他内容的网址是 relative ：它将根据当前页面的上下文进行解析。在您的情况下，不要忘记开头的 http：// ！
链接内的所有角度表达式都应该在括号内：{{item}}.weather[0]不起作用

在循环中准备链接

1 个答案: