Angularjs - set value ng-click inside ng-repeat on an item

Question

I load quite a few videos on the page, from youtube. I want to replace the div with placeholder, and only request the video when user clicks on the placeholder image.

I got this part working where it loads the video on ng-click, but it loads all of them, obviously. How do I load just the one that was clicked?

Here's my html inside ng-view and ng-repeat:

  

  <figure class=" img-responsive">

        <iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}" 
        frameborder="0" allowfullscreen="false" autoplay="0" ng-if="doplay">
        </iframe>
        
        <img ng-src="images/logos/videoplaceholder.jpeg" height="180" 
        class="img-responsive" ng-if="!doplay" ng-click="setPlay()" />

    </figure>

    <script>   
    $scope.setPlay = function (){
        $scope.doplay = true;
    }
    </script>

Like I said, the above works, but loads all the videos at once. I need to load just the one that was clicked. Thanks!!

score 2 · Accepted Answer · answered Sep 25 '15 at 19:41

I don't see your ngRepeat, but the simplest way is something like this:

<figure class="img-responsive" ng-repeat="item in items">
  <iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}" frameborder="0" allowfullscreen="false" autoplay="0" ng-if="item.doplay"></iframe>
  <img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="!item.doplay" ng-click="item.doplay = true" />
</figure>

and skip the controller method. That just sets a property on each item in your collection.

score 0 · Answer 2 · answered Sep 25 '15 at 19:42

Your doplay property only contains one value, so the ng-if condition is the same for every video. You might be able to get away without adding the doplay property to item in advance, since if it's not present it will be falsey.

So your code would change to:

<img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="! item.doplay" ng-click="setPlay(item)" />

and

$scope.setPlay = function (item)
    {
        item.doplay = true;
    }

Angularjs - set value ng-click inside ng-repeat on an item

2 Answers2