Question

我有一个显示youtube视频的视图。我在嵌入式播放器下方有4个屏幕截图，我想用它来选择要播放的视频。我在类似的情况下使用过ng-hide / show和ng-style / ng-if但我无法使用此设置。 Plunker

<body ng-controller="MainCtrl">
<div class="col-md-12">
  <div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/1hGkTqOYxEk?rel=0&autoplay=0" style="width:100%;height:500px"></iframe>

    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Z2elVurPk5s?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>

    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/2ruHn_9FokI?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>

    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/D5zoVoL1_LU?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
  </div>
</div>
<br />
<div class="col-md-3">
  <h4>1st Video (initial video)</h4>
  <img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
  <h4>2nd Video</h4>
  <img src="http://placehold.it/140x150"  ng-click=""/>
</div>
<div class="col-md-3">
  <h4>3rd video</h4>
  <img src="http://placehold.it/140x150"  ng-click=""/>
</div>
<div class="col-md-3">
  <h4>4th video</h4>
  <img src="http://placehold.it/140x150"  ng-click=""/>
</div>

Answer 1

我检查了你的插件，发现你忘记了ng-app。

然后，在控制器内创建一个显示/隐藏视频的功能

var app = angular.module('ngApp', []);

app.controller('MainCtrl', function($scope) {

  $scope.currentVideo = 1;
  $scope.setCurrentVideo = function(videoNumber) {
      $scope.currentVideo = videoNumber;
  };
});

将html标记修改为

<!-- IFRAMES -->
<iframe class="..." src="..." style="..." ng-show="currentVideo === 1"></iframe>

<iframe class="..." src="..." style="..." ng-show="currentVideo === 2"></iframe>

<iframe class="..." src="..." style="..." ng-show="currentVideo === 3"></iframe>

<iframe class="..." src="..." style="..." ng-show="currentVideo === 4"></iframe>

<!-- BUTTONS -->
<div class="col-md-3">
  <h4>1st Video (initial video)</h4>
  <img src="http://placehold.it/140x150" ng-click="setCurrentVideo(1);"/>
</div>
<div class="col-md-3">
  <h4>2nd Video</h4>
  <img src="http://placehold.it/140x150"  ng-click="setCurrentVideo(2);"/>
</div>
<div class="col-md-3">
  <h4>3rd video</h4>
  <img src="http://placehold.it/140x150"  ng-click="setCurrentVideo(3);"/>
</div>
<div class="col-md-3">
  <h4>4th video</h4>
  <img src="http://placehold.it/140x150"  ng-click="setCurrentVideo(4);"/>
</div>

Working plunker

如何使用ng-hide / ng-show或ng-style更改YouTube视频

1 个答案: