[英]retrieve image url from object values - angular js
非常感謝Angular JS。
我正在研究一個項目,並且對此有解決方案,但是我想知道是否有更好的方法,如果可以的話,可以使用更多的“角度式”方法。
本質上,對於每個videoid ,它都會執行ajax請求,以定位該videoid的圖像並將其放入src屬性。
在純JavaScript中,這沒問題,我已經找到了一種解決方案,但它與角度方法有所不同。
我想知道是否可以做一些我在這里所做的事情。 (顯然這還行不通)
標記
<ul class="storysContainer">
<li video-on-click ng-repeat="video in videos" id="video{{$index}}" >
<img ng-src="{{getVideoThumb()}}">
</li>
</ul>
JS
$scope.videos = [
{
'videoid': '1122345'
},
{
'videoid': '1134567'
},
{
'videoid': '2234456'
}
];
$scope.getVideoThumb = function() {
$.get("http://blahblah.com/id=" + url,function(data){
var urlMain = data.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
array.push(urlMain);
});
return array;
}
謝謝
編輯:
這是我想出的解決方案..不確定是否一定是最好的角度式方法,但它確實有效。
angular.forEach($scope.videos, function(data) {
var dataid = "http://blablah.com?id=" + data.videoid;
console.log(dataid);
$.get(dataid, function(img){
var urlMain = img.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
$('#thumb' + data.videoid).attr('src', urlMain);
//array.push(urlMain);
});
});
我會為videos
對象數組中的每個對象聲明URL。 這樣,您可以將值綁定在表示層中。
所以也許像
$scope.videos = [
{
'videoid': '1122345'
},
{
'videoid': '1134567'
},
{
'videoid': '2234456'
}
];
//modified this a little. I take it this call accepts the videoID as a parameter
//and returns the url for a single video?
//I wasn't sure what the 'array' variable you were using was.
//I am also using angular $http service to make this ajax call
$scope.getVideoThumb = function(videoID) {
$http.get("http://blahblah.com/id=" + videoID).success(function(data){
var urlMain = data.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
return urlMain;
});
}
//iterate through each object and assign it a 'URL' property to the result of 'getVideoThumb(videoID)'
for(var i = 0; i < $scope.videos.length; i++){
$scope.videos[i].URL = $scope.getVideoThumb($scope.videos[i].videoid);
}
現在在表示層中,我們可以將URL的值綁定到ng-src
<li video-on-click ng-repeat="video in videos" id="video{{$index}}" >
<img ng-src="{{video.URL}}">
</li>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.