Question

我们开发了一个应用程序，显示我们频道中的所有视频。我们首先显示缩略图，然后点击缩略图，我们只想要该缩略图的相关视频，而不是所有视频

Angular Code

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

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

这样做，（我假设＆＃39; video.id.videoId＆＃39;是您的视频对象ID）

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

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

如何仅为特定缩略图切换显示

1 个答案: