Переключение функции нажмите на список элементов в AngularJS (IFRAME)

Question

Так я имею ниже рабочий процесс:

У меня список элементов каждый из которых имеет ng-click событие, которое открывающее IFRAME ниже элемент щелкнул. Теперь

• При щелчке элемента в списке, div ниже тег этого элемента отображается (изначально скрыто) который содержит iframe.
• Теперь при нажатии на другой элемент из того же списка появляется еще один тег div под последним нажатым пунктом, который, в свою очередь, отображает iframe для недавно щелкнутого элемента.

вопрос, что я столкнулся это -

При щелчке элемента списка, если div тег, содержащий iframe в настоящее время открыт, он закрывается и div тег вместе с Появится сообщение iframe.

В настоящее время, если какой-либо iframe открыт, при нажатии на другой элемент из списка открывается новый iframe недавно щелкнутого элемента, а исходный iframe остается открытым. Первоначальный закрывается только после того, как я нажал на него.

Что мне делать?

PS: Я надеюсь, что сценарий ясен, дайте мне знать, если потребуется дополнительное разъяснение.

Edit-

Проводка jsfiddle связь является своего рода жестким, как этот вопрос является частью огромной папки я работаю. Но я отправлю код здесь и надеюсь, что этого будет достаточно.

HTML:

<div ng-repeat="data in JsonData"> 
    <div class="row" ng-click="getGraph(data.id, $index)"> 
     <div class="col-lg-6 text-left"> 
      <span id="title">Title: &nbsp;{{data.name}}</span><br><br> 
      <span style="color: #000 !important"> 
       <strong>Id:</strong> &nbsp;{{data.id}} 
      </span><br/><br> 
     </div> 
     <div class="col-lg-4 text-left" style="color: #000 !important;"> 
      <span style="text-align: left; font-size: 13px;"> 
        <strong>Details:</strong> {{data.details}} 
      </span><br/> 
     </div> 
     <div class="iframe col-lg-10 col-lg-offset-2"> 
      <div class="ibox float-e-margins ibox_shadow"> 
       <iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}"> 
       </iframe> 
      </div> 
     </div> 
    </div> 
</div> 

И controller.js код:

$scope.getGraph = function(d,i) { 
     $scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d; 
     var elem = document.getElementsByClassName(d); 
     $(elem).toggleClass('class_to_toggle_hide_show'); 
} 

Answer 1

Если вы разместите код будет очистить его больше. Но в нг щелкните событие, которое вы можете сказать первым нг-клик = «youfunction ($ событие)» и

$scope.yourfunction = function(event){ 
    $(even.target).find("iframe").remove(); 
    //and then your other stuff here 

}