如何在角的每一行显示两列

how to show two column at each row in angular?

本文关键字：一行 显示 两列      更新时间：2023-09-26

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

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

所示

2)如果有四个以上的对象，我需要使用离子滑动水平滚动。实际上，在我的演示中，每行只显示一列，为什么呢?

是我的代码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>

我按照要求为您做了一个小演示，

恰好

控制器 

$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",
}]


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

如果你需要更多的功能。请让我知道

试着像下面这样改变你的代码，利用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>

请点击下面的链接查看实际操作

play.ionic.io

相关文章：