連接兩個NG重複

我有兩個ng重複，我想連接在一起使用其唯一的ID。這個想法是，你點擊一個電影海報，相應的流媒體視頻將出現在上面的屏幕使用CSS隱藏/顯示。這是我到目前爲止：連接兩個NG重複

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

來源

2016-08-16 Ewald Bos

你爲什麼要使用JavaScript/jQuery的事件處理程序/ DOM操作？你爲什麼不使用'ng-click' /'ng-show'？ – Cerbrus

你的問題是什麼？一切正常？ – Damiano

您沒有ID爲'＃tab'的元素。考慮使用['ngClick']（https://docs.angularjs.org/api/ng/directive/ngClick） – Nora

如果您使用Angular，則不必/應該使用jQuery。 Angular允許您使用ng-click處理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>

來源

2016-08-16 10:15:28

作品完美，確實要好得多:-)謝謝 –

你不需要2個循環。以創建所選項目的引用，像環路設置它：

<a ng-click="selectedMovie = movie">...</a>

那麼，讓你的角度做的一切。

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

編輯：

沒有測試過，可能無法正常工作。如果是，請嘗試<a ng-click="$parent.selectedMovie = movie">...</a>

來源

2016-08-16 10:11:46 Damiano

連接兩個NG重複

回答

相關問題