Question

我有两个ng-repeats，我想用他们唯一的ID连接在一起。我们的想法是你点击电影海报，相应的流媒体视频将使用CSS hide / show在屏幕上方显示。这就是我到目前为止所做的：

<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事件。

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

你的控制器应该是这样的：

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

然后，每个.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>

连接两个NG重复

1 个答案: