AngularJSのHTML img src内の文字列連結を使用

Question

YouTube API v3で再生リストから動画を引き出しています。各ビデオJSONオブジェクトにはvideoIdがあります。私はvideoIdを使ってimg要素のsrc属性をAngularで構築しようとしています。

これは私が現在持っているものです。

<table id="playlistvideostable" class="table table-responsive table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Thumbnail</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="video in playlistvideos"> 
      <td> 
       {{video.snippet.title}} 
      </td> 
      <td> 
       <img src="http://img.youtube.com/vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/> 
      </td> 
     </tr> 
    </tbody> 
</table> 

私はIMGのhtml要素のsrc属性に次の文字列を連結するにはどうすればよいですか？

"http://img.youtube.com/vi/" + video.resourceId.videoId + "/hqdefault.jpg"

Answer 1

代わりに、画像要素のオリジナルのsrc属性のNG-SRCディレクティブを使用して、NG-SRCディレクティブは、文字列を認識します補間してdomに適用します。あなたのケースで

-

<img ng-src="http://img.youtube.com/vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/> 

幸運。