jahnavi jahnavi - 22 days ago 11
AngularJS Question

how to toggle display for only a particular thumbnail

we have developed an app that displays all the videos in our channel.we first display thumbnails, then we click on the thumbnail,we want only the related video of that thumbnail,not all the 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

Do this, (I am assuming 'video.id.videoId' is your video object ID)

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

And 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>