javascript - 连接两个 NG-Repeats

Question

我有两个 ng-repeats，我想使用它们的唯一 ID 将它们连接在一起。这个想法是你点击一张电影海报，相应的流媒体视频将使用 CSS 隐藏/显示出现在上面的屏幕上。这是我到目前为止所拥有的:

<div class="contentContainer" ng-app="webtest">

      <div class="" ng-controller="LandingPageController">    

          <div class="videoContainer" ng-repeat="movie in movies" > 
             <video width="800" controls>
                 <source src="{{movie.stream}}" type="video/mp4">
             </video>                         
          </div>  

     <div class="moviesContainer">                                   
          <div class="movieCell" ng-repeat="movie in movies">                   
                <a href="#tab{{movie.id}}">
                   <img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
                   <div class="movieCellImageBackground">
                   <div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
                   </div>
                </a>                           
          </div>
        </div>
    </div>
</div>

Answer 1

如果你使用 Angular，你不必/应该使用 jQuery。 Angular 允许你处理 click事件 ng-click .

1. 致您的<a>添加 ng-click="select_video(movie.id)" (您也可以删除 href )。

2. 你的 Controller 应该是这样的:

   var app = angular.module('{your-app-id}', []);
   
   app.controller('LandingPageController', function ($scope) {
       $scope.selected_id = null;
       $scope.movies = (...) /* The array of movies. */
       $scope.select_video = function(id) {
           $scope.selected_id = id;
       };
   });
   

3. 然后，给每个.videoContainer > *添加 ng-if="selected_id == movie.id" .

应该可以，如果不行请告诉我。

编辑: 还可以像这样重新组织您的 HTML:

<div ng-controller="...">
    <div class="videoContainer" ng-repeat="...">
        <div ng-if="...">
            <!-- <video /> here, and stuff visible only if this video is selected -->
        </div>

        <!-- Your <a /> -->
    </div>
</div>