編寫循環中的鏈接

Question

有一組對象。我理清了它的循環。 在這兩個系列中獲取圖像的鏈接？ vm.data.list-對象數組。 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> 

在獲取鏈接到圖像的週期？ （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是相對：它會將b e根據當前頁面的背景解決。在你的情況下，不要忘記在開始時http：//！
• 所有的內部鏈接的角度表達應該是括號內：{{item}}.weather[0]將無法​​正常工作