ng-src in ng-repeat not updating

我對angularjs完全陌生，在這裏我試圖做的是從ng-repeat獲取一個img id，並通過函數傳遞它並獲取返回的圖像字符串，但它顯示了一些錯誤。請幫忙。ng-src in ng-repeat not updating

HTML

<tr data-ng-repeat="(key, list) in listOfProperties"> 
    <img ng-src="{{getImageUrl(key)}}"> 
</tr>

$scope.getImageUrl=function(key){ 

return factory.getImgUrl(key).then(function(data){ 
    return data 
}); 

}

廠

getImgUrl:function(key){ 
    return $http({ 

      method:"GET", 
      url:somedomain.com/getCoverPicture", 
      //This domain will return a image string. 
      params:{'key':key} 

     }).then(function(response){ 

      return response.data; 

     }) 

}

來源

2016-11-14 Vijith Kumar

u能PLS下面添加 – byteC0de

錯誤這是我收到angular.min.js：118錯誤：[$ rootScope：infdig] http://errors.angularjs.org/1.5.8/ $ rootScope/infdig？p0 = 10＆p1 =％5B％5D –

你getImgUrl函數不返回圖像的URL。它返回一個承諾 HTTP響應，其正文包含（希望）一個URL。

ng-src預計URL。

此外，getImageUrl(key)由eclipse摘要循環中的Angular進行評估，並且您確實不希望每次運行摘要循環時都進行HTTP查詢。因此，您需要事先獲取圖像URL（當控制器被實例化時，或者當您獲取listOfProperties時），並將它們存儲在對象中。假設你listOfProperties是一個數組，因爲它應該是，而不是一個對象：

listOfProperties.forEach(function(property) { 
    factory.getImgUrl(property.key).then(function(response) { 
     property.imgUrl = response.data; 
    }); 
});

而在你的看法：

<tr data-ng-repeat="property in listOfProperties"> 
    <td><img ng-src="{{property.imgUrl}}" /></td> 
</tr>

請閱讀this article I wrote約角的承諾，因爲你似乎錯過一些重要關於他們的東西。

來源

2016-11-14 11:26:53

嘗試這個

<tr ng-init="getImageUrl(key);" data-ng-repeat="(key, list) in listOfProperties"> 
     <img ng-src="{{list.url}}"> 
    </tr>

。

$scope.getImageUrl = function(key, list){ 

    return factory.getImgUrl(key).then(function(data){ 
     list.url = data; 
    }); 
}

來源

2016-11-14 11:32:02 byteC0de

Thankz工作。 –

ng-src in ng-repeat not updating

回答

相關問題