根據列表中的選定$ index顯示div

Question

這是我的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列表組的field.name選擇的索引的col-md-8 div數據。

這是我的樣本數據

{
    "scenarios": [{
        "values": ["value 1",
        "value 2",
        "value 3"],
        "title": "some title"
    },
    {
        "values": ["value 1",
        "value 2",
        "value 3"],
        "title": "some title"
    },
    {
        "values": ["value 1",
        "value 2",
        "value 3"],
        "title": "some title"
    }],
    "description": "",
    "name": "Some name  "
}

名稱顯示在左側（在col-md-4中），而相應的數據必須顯示在右側（在col-md-8中）。 但是我不知道該怎么做。 有什么幫助嗎？

Answer 1

如果您僅要顯示一個字段對象，則只需執行以下操作：

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

Answer 2

聲明一個范圍變量來存儲選定的索引，取決於選定的索引顯示其他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>