如何切換僅顯示特定縮略圖

我們開發了一個應用程序，可顯示我們頻道中的所有視頻。我們首先顯示縮略圖，然後點擊縮略圖，我們只需要該縮略圖的相關視頻，而不是全部視頻如何切換僅顯示特定縮略圖

角碼

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

來源

2016-11-17 jahnavi

做到這一點，（我假設 'video.id.videoId' 是你的視頻對象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>

來源

2016-11-17 12:02:01 Priyanka

三江源這麼多 – jahnavi

還告訴我怎麼給一個函數，如果搜索框爲空，則它必須loadvideos如果有什麼是在搜索框輸入時必須搜尋該特定的視頻，當刪除搜索框中，然後應該再次回到起始頁面..我面臨的問題，該網頁正在加載非常緩慢 – jahnavi

@jahnavi在ng重複添加過濾器... – Priyanka

如何切換僅顯示特定縮略圖

回答

相關問題