对 Angular JS 非常菜鸟。
我正在开发一个项目,我有一个解决方案,但我想知道是否有更好的方法 如果你愿意的话,那就更“有棱 Angular ”了。
本质上,对于每个videoid,它都会执行一个ajax请求来定位该videoid的图像 并将其放入 src 属性中。
在纯 JavaScript 中,这不会有问题,我已经找到了一种解决方案,但它有点偏离了 Angular 方法。
我想知道是否可以做一些我在这里所做的事情。 (显然这还行不通)
标记
<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 式方法,但它有效。
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。这样您就可以将值绑定(bind)到表示层中。
所以也许是这样的
$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 的值绑定(bind)到 ng-src
<li video-on-click ng-repeat="video in videos" id="video{{$index}}" >
<img ng-src="{{video.URL}}">
</li>
关于javascript - 从对象值检索图像 url - Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26783893/