Angular 1.0 Daten Außerhalb Div

Question

Zur Zeit einer meiner HTML-Dateien sieht wie folgt angezeigt:

<div ng-controller="ModulesController"> 
<div class="col-md-3"> 
    <ul class="list-group"> 
     <li class="list-group-item" ng-repeat="module in modules"> 
      <a href="#" ng-click="showDetails = ! showDetails">{{module.name}}</a> 
     </li> 
    </ul> 
</div> 

<div class="text-center col-md-9"> 
    <div class="procedure-details" ng-class="{ 'hidden': ! showDetails }"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe width="560" height="315" ng-src="{{module.video | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div> 

Ich bin mir bewusst, dass ich nicht die im zweiten Satz von Tags erhalten können angezeigt werden weil es in Bezug auf die anderen Tags außerhalb des Geltungsbereichs liegt. Gibt es eine Möglichkeit, das Video mit zwei getrennten Spalten zu rendern?

Answer 1

Sie könnten eine Variable namens selectedVideo in einem Bereich & haben, legen Sie einen Wert, um es auf äußere div anzuzeigen. Haben Sie auch showDetails Eigenschaft auf jedem Modulelement, damit Sie verfolgen können, um Video zu zeigen oder nicht.

Markup

<div class="col-md-3"> 
<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="module in modules"> 
    <a href="#" ng-click="selectedVideo = module; module.showDetails=!module.showDetails"> 
     {{module.name}} 
    </a> 
    </li> 
</ul> 
</div> 

<div class="text-center col-md-9" ng-show="selectedVideo.showDetails"> 
    <div class="procedure-details"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe width="560" height="315" ng-src="{{selectedVideo.video | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div>