Wie man Anzeige für nur ein bestimmtes Thumbnail einstellt

Question

Wir haben eine App entwickelt, die alle Videos in unserem Kanal anzeigt.Wir zeigen zuerst Thumbnails an, dann klicken wir auf das Thumbnail, wir wollen nur das zugehörige Video dieses Thumbnails, nicht alle die Videos

Angular-Code

$scope.isvideoPlaying = false; 
$scope.displayvideo = function(){ 
    $scope.isvideoPlaying = true; 
} 

hTML-Code

<div class="list card" ng-repeat="video in videos | filter:searchBox" > 
      <div class="item item-text-wrap"> 
      <h2>{{video.snippet.title}}</h2> 
      <p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p> 
      </div> 
      <div class="item item-image"> 
      <img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying" ng-click="displayvideo()"> 
      <!-- Use 'youtube-video' as an element or attribute. --> 
      <div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying"> 
       <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video> 
      </div> 
      </div> 
     </div> 

Answer 1

dies tun, (I 'video.id.videoId' ich davon ist Ihre Video-Objekt-ID)

$scope.isvideoPlaying = {} 
$scope.displayvideo = function(id){ 
    $scope.isvideoPlaying[id] = true; 
} 

Und HTML,

<div class="list card" ng-repeat="video in videos | filter:searchBox" > 
     <div class="item item-text-wrap"> 
     <h2>{{video.snippet.title}}</h2> 
     <p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p> 
     </div> 
     <div class="item item-image"> 
     <img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying[video.id.videoId]" ng-click="displayvideo(video.id.videoId)"> 
     <!-- Use 'youtube-video' as an element or attribute. --> 
     <div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying[video.id.videoId]"> 
      <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video> 
     </div> 
     </div> 
    </div>