我想知道如何在AngularJS材料设计中将这种类型的复合ng-repeat从使用表转换为重复。
我的标记现在看起来像这样:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>AccountName</th>
<th>AccountID</th>
<th>ContainerID</th>
<th>ContainerName</th>
<th>Path</th>
<th>Favorite</th>
<th>Hide</th>
<th>Count</th>
</tr>
</thead>
<tbody ng-repeat="(k,v) in containers">
<tr ng-repeat="(k1,v1) in v" ng-if="v1.accountId!= null || v1.accountId == ''">
<td><a href="{{v1.tagManagerUrl}}">{{ k }}</a></td>
<td>{{ v1.accountId }}</td>
<td>{{ v1.containerId }}</td>
<td>{{ v1.name }}</td>
<td><a href="/gui/tags/{{v1.path}}">View Container</a></td>
</tr>
</tbody>
</table>
我已尝试将此标记用于md-cards,但它完全错了:
<md-card ng-repeat="(k,v) in containers">
<md-card-content ng-repeat="(k1,v1) in v">
<h2 class="md-title">{{ v1.name }}</h2>
<p>
{{ v1.accountId }}
</p>
</md-card-content>
</md-card>
答案 0 :(得分:1)
如果您不想重复Acccount
值,可以执行以下操作:
<md-card ng-repeat="(k,v) in containers">
<md-card-content ng-repeat="(k1,v1) in v">
<h2 class="md-title" ng-if="$first">{{ v1.name }}</h2>
<p>
{{ v1.accountId }}
</p>
</md-card-content>
</md-card>
答案 1 :(得分:0)
我使用了这段代码:
<div class='md-padding' layout="row" flex>
<div layout="row" flex>
<div class="parent" layout="column" ng-repeat="(k,v) in containers">
<md-card ng-repeat="(k1,v1) in v" ng-if="v1.accountId!= null || v1.accountId == ''">
<md-card-content>
AccountName: {{k}}<br>
Accountid: {{ v1.accountId }} <br>
ContainerName: {{ v1.name }}
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
</div>
</div>