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>

Angular 1.0显示Div之外的数据

1 个答案: