CODEWITHSUNDEEP
javascriptangularjsiframe
Ludwig
Ludwig

Reputation: 1811

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

Upvotes: 0

Views: 308

Answers (2)

Dinesh Shah
Dinesh Shah

Reputation: 1233

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>

Upvotes: 1

daan.desmedt
daan.desmedt

Reputation: 3820

I've created a JSFIDDLE (basic) to give you a head start on what you are trying to do.

VIEW

<div ng-app="app">
  <div ng-controller="helloCnt">

    <div ng-repeat='item in data'>
      <span ng-if="item.hide === undefined || !item.hide">{{item.name}}</span>
      <div ng-if="!item.hide" ng-click="playVideo(item)">
        HIDE
      </div>
      <div ng-if="item.hide" ng-click="stopVideo(item)">
        SHOW
      </div>
      <br/>
    </div>

  </div>
</div>

CONTROLLER

var app = angular.module('app', [])
app.controller('helloCnt', function($scope) {
  $scope.data = [{
    'name': 'test'
  }, {
    'name': 'in'
  }, {
    'name': 'dummy'
  }, {
    'name': 'data'
  }]

  $scope.playVideo = function(item, videoSrc) {
    // other code
    item.hide = true;
  };
  $scope.stopVideo = function(item, videoSrc) {
    // other code
    item.hide = false;
  };
})

SEE JSFIDDLE

Upvotes: 1

Related Questions