AngularJS滑块视频缩略图点击问题：ng-if如何匹配对应视频ID？

我来帮你搞定这个问题！你现在遇到的核心问题是：所有缩略图的data-target都指向同一个#myModal，而你用ng-repeat生成了多个带这个ID的模态框，浏览器只会找到第一个匹配该ID的元素，所以不管点哪个缩略图，都会打开第一个视频的模态框。

下面给你两种解决方案，推荐第一种更简洁高效的实现方式：

方案一：单模态框 + 绑定选中视频（推荐） #

这种方法只生成一个模态框，通过点击缩略图时把对应视频的数据赋值给控制器里的变量，模态框直接使用这个变量的内容，不需要循环生成多个模态框，性能更好。

步骤1：在控制器中定义选中视频变量 #

在你的videoCtrl里添加一个变量，用来存储点击的视频数据：

app.controller('videoCtrl', function($scope) {
  // 假设你的video数据已经在这里定义
  $scope.video = [...];
  // 新增选中视频变量
  $scope.selectedVideo = null;
});

步骤2：修改缩略图的点击事件 #

给每个缩略图的<a>标签添加ng-click，把当前视频数据赋值给selectedVideo：

<div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
  <a data-toggle="modal" data-target="#myModal" ng-click="selectedVideo = data">
    <img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
  </a>
  <div class="descriptionVideo">
    <p>{{data.legende}}</p>
  </div>
</div>

步骤3：修改模态框代码 #

去掉模态框上的ng-repeat和ng-if，直接使用selectedVideo的属性：

<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
      </div>
      <div class="modal-body">
        <video ng-src="{{selectedVideo.src}}" controls="controls" width="550px" height="300px" poster="{{selectedVideo.miniature}}" preload="metadata"></video>
      </div>
    </div>
  </div>
</div>

方案二：多模态框 + 唯一ID（不推荐，DOM冗余） #

如果你坚持想用ng-if的思路，需要给每个模态框设置唯一的ID，让缩略图对应到自己的模态框：

修改缩略图的data-target #

<div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
  <a data-toggle="modal" data-target="#myModal{{data.id}}">
    <img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
  </a>
  <div class="descriptionVideo">
    <p>{{data.legende}}</p>
  </div>
</div>

修改模态框的ID和ng-if #

这里ng-if其实可以去掉，因为每个模态框对应一个视频，直接用唯一ID区分即可：

<div class="modal fade" id="myModal{{data.id}}" ng-repeat="data in video">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
      </div>
      <div class="modal-body">
        <video ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
      </div>
    </div>
  </div>
</div>

关于你提到的data.id == data.miniature.id语法 #

如果你的视频数据里，data.miniature是一个包含id的对象，那这个语法是可以用的，但在你的场景里其实不需要——因为每个data本身就是一个视频项，它的id就是唯一标识，不需要和自己的缩略图ID对比，直接用data.id来区分模态框即可。

内容的提问来源于stack exchange，提问作者WeelCodeur