Question

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

1）首先，我只在阵列中使用四个对象。我需要在每行中显示两个，如图所示

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>

Answer 1

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

Plunker

<强>位指示

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

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

Answer 2

尝试更改下面的代码，利用$ angular of angularjs。

<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

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

2 个答案: