如何在角度的每一行顯示兩列？

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