javascript - 如何以 Angular 在每一行显示两列？

Question

你能告诉我如何在每行中以 Angular 显示两列吗？我需要在每一行中显示两列。我试图在每张幻灯片中只显示两行。如果有更多的 4 个项目，我需要在 ionic 幻灯片上显示项目。我会解释更多

1) 首先我只在数组中取四个对象。我需要在每一行中显示两个，如图所示

2) 如果有超过四个对象我需要使用 ion-slide 水平滚动..实际上在我的演示中它每行只显示一列为什么？

这是我的代码 http://play.ionic.io/app/95a2d932f578

<div id="wrapper">
    <ion-slide-box>
        <ion-slide>
            <div class="row" ng-repeat="d in data">
                <div class="col col-50">
                    <div class="card">
                        <div class="item item-text-wrap">
                            {{d.name}}
                        </div>
                    </div>
                </div>
            </div>
        </ion-slide>
    </ion-slide-box>
</div>

Answer 1

我已经按照要求给大家做了一个小demo，

Plunker

Controller

$scope.items = [{
    name1: "Product 1",
    img1: "https://placehold.it/100x100",
    content1: "Awesome",
    name2: "Product 2",
    img2: "https://placehold.it/100x100",
    content2: "cool",
}, {
    name1: "Product 3",
    img1: "https://placehold.it/100x100",
    content1: "Fantstic",
    name2: "Product 4",
    img2: "https://placehold.it/100x100",
    content2: "Not bad",
}, {
    name1: "Product 5",
    img1: "https://placehold.it/100x100",
    content1: "Good",
    name2: "Product 6",
    img2: "https://placehold.it/100x100",
    content2: "best",
}]

HTML

<div class="row" ng-repeat="item in items" style="margin:5px auto">
    <div class="col col-50">
        <div class="div-img-device">
            <img class="img-device" ng-src="{{item.img1}}"> {{item.name1}}
            <br>{{item.content1}}
        </div>
    </div>
    <div class="col col-50">
        <div class="div-img-device">
            <img class="img-device" ng-src="{{item.img2}}"> {{item.name2}}
            <br>{{item.content2}}
        </div>
    </div>
</div>

CSS

.div-img-device {
        background-color: #4F8CA5;
        margin: 0;
        autoborder: 1px solid black;
        border-radius: 4px;
        text-align: center;
        color: white;
 }

 .img-device {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
 }

如果您需要更多功能，请告诉我