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

Question

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

HTML 代码

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

AngularJS 代码

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

Answer 1

你可以试试这个

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

AngularJS 代码

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

Answer 2

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

您也不需要在控制器中编写任何函数。只需切换一个范围变量，如下所示：

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

在你的控制器中：

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;
});

您可以在视频上设置一个按钮来关闭视频并通过将“showVideo”设置为 true 来显示缩略图。

Answer 4

使用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'}
}

如果你想初始化 myStyle 使用

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