Toggle Klickfunktion auf Liste der Elemente in AngularJS (iframe)

Question

So habe ich die folgenden Arbeitsablauf:

ich eine Liste der Elemente haben jeweils eine ng-click Veranstaltung, die einen Iframe öffnet unten das Objekt hat geklickt. Nun

• auf einen Eintrag in der Liste klicken, ein div Tag unter diesem Element zeigt (zunächst verdeckt) die ein iframe enthält.
• Wenn Sie nun auf ein anderes Element in der gleichen Liste klicken, wird unter dem zuletzt angeklickten Element ein weiteres div-Tag angezeigt, das wiederum iframe für das zuletzt angeklickte Element anzeigt.

Die Ausgabe, die ich gegenüber ist die -

auf einen Eintrag in der Liste klicken, falls vorhanden div Tag die iframe enthält derzeit geöffnet ist, wird es geschlossen und der div-Tag zusammen mit Die iframe des zuletzt angeklickten Elements wird angezeigt.

Wenn derzeit ein Iframe geöffnet ist, wird beim Klicken auf ein anderes Element aus der Liste ein neuer Iframe des zuletzt angeklickten Elements mit dem ursprünglichen Iframe geöffnet. Der erste wird erst geschlossen, nachdem ich ihn angeklickt habe.

Was soll ich tun?

PS: Ich hoffe, das Szenario ist klar, lassen Sie mich wissen, wenn weitere Klärung erforderlich ist.

Bearbeiten-

ein jsfiddle Link Posting ist ein bisschen schwer, wie diese Frage ein Teil eines riesigen Ordner auf ich arbeite. Aber ich poste den Code hier und hoffe, dass es ausreichen wird.

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> 

Und die controller.js Code:

$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

Wenn Sie den Code veröffentlichen wird es mehr löschen. Aber im ng-Klick-Ereignis können Sie zunächst sagen ng-click = "youfunction ($ event)" und

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

}