Javascript 连接两个NG重复

我有两个ng重复，我想用它们的唯一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>

---

你不需要两个循环。创建对所选项目的引用，并在循环中进行设置，如下所示：

那就让我为你做一切吧

<div ng-controller="LandingPageController"> 

    <video width="800" controls>
        <source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
    </video>  
    <div class="newscontainer">{{selectedMovie.id}} CLICKED</div>      

    <div class="moviesContainer" id="tabs">                  
        <div class="movieCell" ng-repeat="movie in movies">                   
            <a ng-click="selectedMovie = movie">
                <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 ng-controller="LandingPageController"> 

    <video width="800" controls>
        <source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
    </video>  
    <div class="newscontainer">{{selectedMovie.id}} CLICKED</div>      

    <div class="moviesContainer" id="tabs">                  
        <div class="movieCell" ng-repeat="movie in movies">                   
            <a ng-click="selectedMovie = movie">
                <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>

编辑：

---

未经测试，可能无法工作。如果是这样，请尝试…

如果使用Angular，则不必/应该使用jQuery。 Angular允许您使用ng click处理单击事件

要添加ng，请单击=选择\u videomovie.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;
    };
});

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

然后，在every.videoContainer>*中添加ng if=selected\u id==movie.id

应该行得通，如果不行就告诉我

编辑： 还可以按如下方式重新组织HTML：

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

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

---

如果使用Angular，则不必/应该使用jQuery。 Angular允许您使用ng click处理单击事件

要添加ng，请单击=选择\u videomovie.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;
    };
});

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

然后，在every.videoContainer>*中添加ng if=selected\u id==movie.id

应该行得通，如果不行就告诉我

编辑： 还可以按如下方式重新组织HTML：

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

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

---

为什么要使用JavaScript/jQuery事件处理程序/DOM操作？为什么不使用ng click/ng show？有什么问题？一切正常？您没有id选项卡的元素。考虑使用JavaScript /jQuery事件处理程序/ DOM操作的原因吗？为什么不使用ng click/ng show？有什么问题？一切正常？您没有id选项卡的元素。考虑使用