顯示基於從列表中選擇$指數DIV angularjs

這裏是我的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>

我想根據從field.name從col-md-4列表組中選擇指數顯示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）。但我無法弄清楚如何去做。任何幫助？

來源

2015-12-07 Vittal Das

你的'showData（$ index）'函數 – azad

在哪裏，這就是我給出的名稱。我應該寫什麼函數來顯示基於$ index值的數據。 –

試試我的答案 – azad

申報範圍varible存儲選擇的指標，取決於所選指標顯示其他分區，

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

來源

2015-12-07 13:37:42 azad

謝謝......它的工作完美:) –

當你做一個ng-repeat，而你只想總是顯示1 – devqon

這個模板應該已經生成了， – azad

如果你只打算顯示一個字段對象，我只想做到以下幾點：

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

來源

2015-12-07 13:22:12 devqon

顯示基於從列表中選擇$指數DIV angularjs

回答

相關問題