Javascript 如何以角度显示每行的两列？

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

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

2） 如果有四个以上的对象，我需要使用ion幻灯片水平滚动。实际上在我的演示中，每行只显示一列。为什么

这是我的密码

{{d.name}

我根据要求为您制作了一个小演示

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>

---

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

尝试更改您的代码，如下所示，利用angularjs的$index

<ion-slide-box>
 <ion-slide>
  <ion-scroll zooming="true" direction="y" style="height: 500px">
    <div class="row" ng-repeat="d in data" ng-switch on="$index % 2">
        <div class="col col-50" ng-switch-when="0">
            <div class="card">
                <div class="item item-text-wrap">
                  {{d.name}}
                </div>
            </div>

        </div>
     <div class="col col-50" ng-show="data[$index+1]">
            <div class="card" ng-switch-when="0">
                <div class="item item-text-wrap">
                  {{data[$index+1].name}}
                </div>
            </div>
        </div>
    </div>
  </ion-scroll>
</ion-slide>

{{d.name}
{{data[$index+1].name}

请按照下面的链接查看它的实际操作

---

谢谢你的回答。但是如果有六个对象，我需要它开始水平滚动，而不是垂直滚动。这就是为什么我使用ion Slide。我需要在一页上显示四个框。如果有四个以上的页面，那么它会水平滚动。当我在演示中给你对象时，你可以选择任何类型的对象。我只是做一个演示当数据丢失时会发生什么超过4个或4个对象您可以像这样添加滚动条。我已经更新了play.iconic中的示例。我尝试了，但它不起作用..你能解释一下上面的逻辑吗？你能再玩一次吗。。。！！请您详细解释一下如何使用ng switch实现这一点，好吗？更新了我在同一play.icogal中的示例。

.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;
 }

<ion-slide-box>
 <ion-slide>
  <ion-scroll zooming="true" direction="y" style="height: 500px">
    <div class="row" ng-repeat="d in data" ng-switch on="$index % 2">
        <div class="col col-50" ng-switch-when="0">
            <div class="card">
                <div class="item item-text-wrap">
                  {{d.name}}
                </div>
            </div>

        </div>
     <div class="col col-50" ng-show="data[$index+1]">
            <div class="card" ng-switch-when="0">
                <div class="item item-text-wrap">
                  {{data[$index+1].name}}
                </div>
            </div>
        </div>
    </div>
  </ion-scroll>
</ion-slide>