角1.0顯示數據外股利

Question

的

的我的HTML文件，目前一個看起來是這樣的：

<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> 

我知道，我不能讓在第二組的標籤顯示因爲它與其他標籤相比超出了範圍。有沒有一種方法可以在有兩個單獨列的情況下呈現視頻？

Answer 1

您可以在&範圍內爲變量名爲selectedVideo設置一個值，以在外部div上顯示該變量。每個模塊元素上也有showDetails屬性，以便您可以跟蹤顯示視頻與否。

標記

<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>