Question

我们试图在点击第一个元素时切换两个元素的显示，即，当我点击缩略图时，我想仅显示该缩略图的视频并隐藏缩略图和剩余的缩略图应保持不变。

HTML代码

＆＃13;

<div class="list card" ng-repeat="video in videos" >
<div class="item item-image">
   <img ng-src="{{video.snippet.thumbnails.medium.url}}" ng-click="displayvideo(this)">
   <div class="embed-responsive embed-responsive-16by9" style="display : none;" id="vid1">
       <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
   </div>
</div>

＆＃13;

AngularJS代码

$scope.displayvideo = function(this){
    this.style.display = none;
    var ele = angular.element('#vid1');
    ele.style.display = float;
}

Answer 1

你可以试试这个

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="item item-image">
   <img ng-show="!isvideoPlaying" ng-src="{{video.snippet.thumbnails.medium.url}}" ng-click="displayvideo()">
   <div ng-show="isvideoPlaying" class="embed-responsive embed-responsive-16by9" style="display : none;" id="vid1">
   <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>

＆＃13;

AngularJS代码

＆＃13;

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

＆＃13;

Answer 2

使用ng-show / ng-hide / ng-if是最好的方法，但是现在你使用这样的东西，

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="item item-image">
   <img ng-src="{{video.snippet.thumbnails.medium.url}}" ng-click="displayvideo(video)">
   <div class="embed-responsive embed-responsive-16by9" ng-style="video.myStyle" id="vid1">
       <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
   </div>
</div>

在控制器中：

$scope.displayvideo = function(video){
    video.myStyle={'display':'none'}
}

如果ypu想要使用

初始化myStyle

ng-init="video.myStyle={'display':'float'}"

Answer 3

<div class="item item-image">
   <img ng-show="display" ng-src="{{video.snippet.thumbnails.medium.url}}" ng-click="display=!display">
   <div ng-show="!display" class="embed-responsive embed-responsive-16by9" style="display : none;" id="vid1" ng-click="display=!display">
       <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
   </div>
</div>

并设置

$scope.display=true;

将其设置为 true 最初将显示缩略图，点击缩略图后，视频将显示，缩略图将被隐藏。

Answer 4

您也无需在控制器中编写任何功能。只需切换范围变量，如下所示：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-repeat="video in allVideos">
<div class="item item-image">
   <img ng-src="{{video.snippet.thumbnails.medium.url}}" ng-click="showVideo = true" ng-hide="video.showVideo">
   <div class="embed-responsive embed-responsive-16by9" style="display : none;" id="vid1" ng-show="video.showVideo">
       <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
   </div>
</div>
</div>

＆＃13;

在您的控制器中：

var allVideos = {"data":[{"id":{"video_id":"Vid-1"},"snippet":{"thumbnails":{"medium":{"url":"http://sampleVideoThumnail1.jpg"}}}},{"id":{"video_id":"Vid-2"},"snippet":{"thumbnails":{"medium":{"url":"http://sampleVideoThumnail2.jpg"}}}}]}

假设您的视频数据类似于上面的数组，一旦您获取了数据，您就可以遍历上面的数组并在每个对象中添加一个新的键，如下所示：

$scope.allVideos = allVideos.data.map(function (eachVideo){
  return eachVideo.showVideo = false;
});

您可以在视频上设置一个按钮来关闭视频，并通过制作＆＃34; showVideo＆＃34;为真。

如何在AngularJS中切换两个元素的显示

4 个答案: