Konvertieren von ng-repeat Tabelle zu Karte

Question

Ich war verwunderlich, wie ich diese Art von komplexen ng-Wiederholung von der Verwendung von Tabelle in AngularJS Material-Design zu konvertieren konvertieren kann.

Meine Markup wie folgt aussieht jetzt:

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

Ive versuchte md-Karten mit dieser Auszeichnung für, aber es wird alles falsch:

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

Wenn Sie die Bilder die Anfrage sehen können und die ng-wiederhole es nicht wie eine Tabelle, wo Sie jede Zeile für jedes Konto/Container haben:

Answer 1

ich es mit diesem Code arbeiten bekam:

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

Answer 2

Wenn Sie nicht den Acccount Wert wiederholen möchten, können Sie etwas tun:

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