导航选项卡和选项卡内容的嵌套ng-repeat

时间:2017-03-17 06:34:23

标签: javascript jquery html angularjs twitter-bootstrap

尝试循环浏览ng-repeat (key, values)并使用key作为标题标题以及href="#{{ key }}"。使用与tab-content-panel相同的key 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>

1 个答案:

答案 0 :(得分:0)

您需要将角度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>