CODEWITHSUNDEEP
javascriptcssangularjsangularjs-ng-repeat
Ewald Bos
Ewald Bos

Reputation: 1770

Connecting two NG-Repeats

i have two ng-repeats that i would like to connect together using their unique id. The idea is that you click a movie poster and the corresponding streaming video will come up the screen above using CSS hide/show. This is what i have so far:

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

Upvotes: 1

Views: 70

Answers (2)

DamianoPantani
DamianoPantani

Reputation: 1386

You don't need 2 loops. Create a reference to selected item, and set it up in the loop like:

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

Let then angular do everything for you.

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

EDIT:

Not tested, may not work. If so, try <a ng-click="$parent.selectedMovie = movie">...</a>

Upvotes: 1

jedrzejginter
jedrzejginter

Reputation: 412

If you use Angular, you don't have to/ should use jQuery. Angular allows you to handle click event with ng-click.

  1. To your <a> add ng-click="select_video(movie.id)" (you can also remove href).

  2. And you controller should look like this:

    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. Then, to every .videoContainer > * add ng-if="selected_id == movie.id".

Should work, let me know if it doesn't.

EDIT: Also reorganize your HTML like this:

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

Upvotes: 4

Related Questions