用于导航选项卡和选项卡内容的嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat for nav-tabs and tab-contents用于导航选项卡和选项卡内容的嵌套 ng-repeat
【发布时间】：2017-03-17 15:04:26
【问题描述】：

尝试循环遍历ng-repeat (key, values) 并使用key 作为标签页眉以及href="#{{ key }}"。使用相同的 key 作为 tab-content-panel 的 id 创建了新的 ng-repeat，试图访问父级 values（来自父级 ng-repeat 的值）。但是无法访问 tab-content 元素中的父键值。我们如何在子循环中使用父循环键、值？

<div>
<ul class="nav nav-tabs" >
	<li class="active"  ng-repeat="(key, values) in specs" ng-class="{'active': isActive(key)}"><a  data-toggle="tab" href="#{{ key }}">{{ key }}</a></li>
</ul>

<div class="tab-content">
	<div id="{{ key }}" class="tab-pane fade in active">
		<table class="table" style="padding: 1	0px;">
			  <tbody>
			     <tr ng-repeat="(k, value) in values">
			      	<td>{{k}}</td>
			     		<td>{{value}}</td>
			     	</tr>
			    </tbody>
			</table>
	</div>
			 
</div>
</div>

【问题讨论】：

你可以使用ng-repeat="val in values"，然后你可以使用{{val.k}}和{{val.value
@JijoCleetus，问题无法从父循环访问值本身，我从父 ng-repeat 获取“值”，因为第二个循环在新元素范围内，父值不可访问.
请分享您的控制器结构

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

您需要将角度 ng-virtual-repeat 值设置为 true。

参考这个。在这里，在循环中设置循环

http://klajd.github.io/angular-virtual-repeat/#/Home

https://github.com/klajd/angular-virtual-repeat

例子：

<div>

<md-table-container virtual-repeat="true" sortable-columns="true" animate-sort-icon="true">
     <table md-table >
       <thead md-head>
          <tr md-row >
            <th md-column ng-repeat="header in headerData "><span> {{header}}</span></th>
          </tr>
        </thead>

      <tbody md-body>
     <tr md-row ng-repeat="folder in Folders" style="height:30px"> 
         <th md-cell > <center><span style="" class="glyphicon glyphicon-option-vertical"></span></center></th>
         <th md-cell ng-dblclick="openFolder(folder)" md-autofocus >{{folder.folderName}}</th>
       </tr>

        <tr md-row ng-repeat="files in fileData" style="height:30px" >
          <th md-cell ><center><span style="width: 10px; height: 15px;" class="glyphicon glyphicon-option-vertical"></span></center></th>
  <th md-cell  ng-click="getFileId(files)" md-autofocus >{{files.fileName}}</th></tr></tbody>
  </md-table-container>
  </div>

【讨论】：