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

Question

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

1）首先，我采取在阵列.I需要示出了两个在每行中仅四个对象如图图像

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

我做了一个小的演示给你按要求，

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

如果您需要更多features.Please让我知道

Answer 2

试着改变你的代码像下面这需要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