将 ng-repeat table 转换为卡片

Question

我正在思考如何将这种复杂的 ng-repeat 从使用 table 转换为在 AngularJS material 设计中重复。

我的标记现在看起来像这样：

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

如果您能看到请求和 ng-repeat 的图像，它看起来不像 table，其中每个 account/container 都有每一行：

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

Answer 2

我用这段代码得到了它：

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

将 ng-repeat table 转换为卡片

Converting ng-repeat table to card

angularjs

angularjs-ng-repeat

angular-material