Question

我正在使用ng-repeat显示卡片。数据和一切都很好，但不知何故，我正在努力连续3张牌，并转到其他项目的下一行。

我的ng-repeat代码如下：

<md-content ng-repeat="agent in agents|filter:search" layout="row">
            <md-card>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-subhead">{{agent.RCustId}}</span>
                        <span class="md-headline">{{agent.FullName}}</span>
                        <span class="md-subhead">{{agent.ContactNum}}</span>
                    </md-card-title-text>

                </md-card-title>

                <md-card-content>
                    <p>
                        {{agent.address}}
                    </p>
                </md-card-content>

                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Collect {{agent.balance_amount}}</md-button>
                </md-card-actions>

            </md-card>
        </md-content>

我希望这张卡并排，但每行都会有一张卡。

问题在哪里以及如何解决。

Answer 1

尝试使用md-card <div>并layout-wrap围绕flex=".." - 然后您可以使用<div class='md-padding' layout="row" layout-wrap> <md-card flex="33" ng-repeat="agent in agents|filter:search"> - 与您想要的行数相对应的数字。

请参阅布局选项文档here。

var office = item as Office;
var computer = item as Computer;
var monitor = item as Monitor;
if (office != null)
{
     <p>
          <a onclick="getItem(@item ) ">
               @item.Name1, @office.OfficeLocation;    <== office "knows" properties
           </a>
     </p>
}

有关详细信息和示例，请参阅答案here。

Answer 2

添加内容

内的内容

<section layout="row" layout-sm="column"  layout-wrap>
// your code
</section>

工作示例http://plnkr.co/edit/hE38nAAJT35UJL71JGoS?p=preview

在ng-repeat中对齐卡片

2 个答案: