Marco Marco - 4 months ago 29
AngularJS Question

Angular hide an element in ng-repeat on click

I have articles listed on a page in my app, where I have an iframe and overlay over that iframe. I want to have it that when a user clicks on an iframe overlay, that the title from that article gets hidden. Not sure how to achieve that in ng-repeat. This the code, where as of now, on a click event titles of all articles get hidden.

<ion-item ng-repeat="article in articles" class="item-light">
<div class="article">
<a ng-show="article.external_media.length == 0 || article.external_media.url == ''" href="#/main/article/{{article.id}}" nav-direction="forward" class="article-image-link">
<img src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
<div class="article-image-link">
<h1 ng-hide="videoPlaying">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
</div>
</ion-item>


Controller:

$scope.playVideo = function(videoSrc) {
$scope.videoPlaying = true;
$scope.videoSrc = videoSrc + "&autoplay=1";
};

Answer

you can also use $index for this purpose.

controller

  app.controller('someController',function($scope){

   $scope.videoPlaying = [];

   $scope.playVideo = function(videoSrc,index) {

   $scope.videoPlaying[index] = true;
   $scope.videoSrc = videoSrc + "&autoplay=1";
};

   $scope.stopVideo = function(videoSrc,index) {

   $scope.videoPlaying[index] = false;
   $scope.videoSrc = videoSrc + "&autoplay=1";
};

})

HTML

i am changing only two lines rest are same as it is

 <h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>



   <div class="iframe-overlay" ng-click="playVideo($index)"></div>