javascript - 从对象值检索图像 url - Angular JS

Question

对 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);
  });
});

Answer 1

我将声明 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>