如何使用 ng-repeat 在 Ionic 中创建卡片的动态排列
How to create dynamic arrangement of cards in Ionic using ng-repeat
目前我的 IONIC 应用程序主页如下所示:
当应用为平板电脑大小时,卡片会横跨屏幕并占用很多不必要的空间 space。我希望卡片并排放置,但当应用程序 运行 在 phone 上时,卡片应排成一列,如下所示:
在平板电脑上 -
[card 1] [card 2] [card 3] [card 4]
[card 5] [card 6] [card 7] [card 8]
[card 9] [card 10] [card 11] [card 12]
etc...
在 Phone -
[card 1]
[card 2]
[card 3]
[card 4]
etc...
我的问题是:如何更改以下代码(使用 ng-repeat)来创建所需的卡片动态布局?
<div class="card" ng-repeat="schedule in vm.scheduleData | orderBy: '-ScheduleDate' | limitTo: 100"
ng-click="vm.selectMasterBill(schedule.MasterBOLNumber)">
<div class="item item-divider item-positive">
Master BOL Number {{schedule.MasterBOLNumber}}
</div>
<div class="item item-divider">
<p>Date scheduled: {{vm.parseDate(schedule.ScheduleDate)}}</p>
</div>
<div class="item item-divider">
<p>Scheduled by: {{schedule.ScheduleBy}}</p>
</div>
<div class="item item-divider">
<p>Carrier code: {{schedule.CarrierCode}}</p>
</div>
</div>
在样式表中使用媒体查询。
例如:您的 scss/css 文件看起来像这样:
.responsive-card {
width: 100%;
float: left;
}
@media screen and (min-width: 768px) {
.responsive-card {
width: 25%;
}
}
不要忘记在 html 中添加 responsive-card
class:
<div class="card responsive-card" ng-repeat="schedule in vm.scheduleData">
...
</div>
目前我的 IONIC 应用程序主页如下所示:
当应用为平板电脑大小时,卡片会横跨屏幕并占用很多不必要的空间 space。我希望卡片并排放置,但当应用程序 运行 在 phone 上时,卡片应排成一列,如下所示:
在平板电脑上 -
[card 1] [card 2] [card 3] [card 4]
[card 5] [card 6] [card 7] [card 8]
[card 9] [card 10] [card 11] [card 12]
etc...
在 Phone -
[card 1]
[card 2]
[card 3]
[card 4]
etc...
我的问题是:如何更改以下代码(使用 ng-repeat)来创建所需的卡片动态布局?
<div class="card" ng-repeat="schedule in vm.scheduleData | orderBy: '-ScheduleDate' | limitTo: 100"
ng-click="vm.selectMasterBill(schedule.MasterBOLNumber)">
<div class="item item-divider item-positive">
Master BOL Number {{schedule.MasterBOLNumber}}
</div>
<div class="item item-divider">
<p>Date scheduled: {{vm.parseDate(schedule.ScheduleDate)}}</p>
</div>
<div class="item item-divider">
<p>Scheduled by: {{schedule.ScheduleBy}}</p>
</div>
<div class="item item-divider">
<p>Carrier code: {{schedule.CarrierCode}}</p>
</div>
</div>
在样式表中使用媒体查询。
例如:您的 scss/css 文件看起来像这样:
.responsive-card {
width: 100%;
float: left;
}
@media screen and (min-width: 768px) {
.responsive-card {
width: 25%;
}
}
不要忘记在 html 中添加 responsive-card
class:
<div class="card responsive-card" ng-repeat="schedule in vm.scheduleData">
...
</div>