Javascript 根据列表中选定的$index显示div

这是我的HTML代码

 <div class="col-md-4">
    <ul class="list-group text-left">
        <a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data">
         {{ field.name }}</a>
    </ul>
 </div>
<div class="col-md-8">
    <div ng-repeat="field in Data" >
        <div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
            <div class="panel-heading ">
                {{ scenario.name }}
            </div>
            <ul class="list-group p-body">
                <li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
            </ul>
        </div>
</div>

名称显示在左侧（在col-md-4中），相应的数据必须显示在右侧（在col-md-8中）。

---

但我不知道怎么做。有什么帮助吗？

如果您只想显示一个字段对象，我只需执行以下操作：

<div class="col-md-4">
    <ul class="list-group text-left">
        <a href="#" class="list-group-item" 
           ng-click="selectedField = field" 
           ng-repeat="field in Data">
         {{ field.name }}</a>
    </ul>
 </div>
<div class="col-md-8">
    <!-- only if one is selected -->
    <div ng-if="selectedField">
        <div class="panel panel-primary" 
             <!-- get data from 'selectedField' -->
             ng-repeat="scenario in selectedField.scenarios track by $index">
            <!-- other stuff -->
        </div>
    </div>
</div>

声明一个范围变量以存储选定索引，根据选定索引显示其他div

<div class="col-md-4">
  <ul class="list-group text-left">
    <a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
         {{ field.name }}</a>
  </ul>
</div>
<div class="col-md-8">
  <div ng-show="selectedIndex == $index" ng-repeat="field in Data">
    <div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
      <div class="panel-heading ">
        {{ scenario.name }}
      </div>
      <ul class="list-group p-body">
        <li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
      </ul>
    </div>
  </div>

{{scenario.name}

{{value}

您的

showData（$index）

函数在哪里？这正是我给出的名称。我应该在这个函数中写些什么来显示基于$index值的数据。当您执行ng repeat时，会有很大的开销，而您只希望始终显示1

<div class="col-md-4">
  <ul class="list-group text-left">
    <a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
         {{ field.name }}</a>
  </ul>
</div>
<div class="col-md-8">
  <div ng-show="selectedIndex == $index" ng-repeat="field in Data">
    <div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
      <div class="panel-heading ">
        {{ scenario.name }}
      </div>
      <ul class="list-group p-body">
        <li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
      </ul>
    </div>
  </div>