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-8列表组field.name中选择的索引显示col-md-4 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>

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

2 个答案: