CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveionic-framework
user944513
user944513

Reputation: 12729

how to show two column at each row in angular?

could you please tell me how to show two column at each row in angular ?.I need to show two column in each row .I am trying to show only two row in each slide .If there is more the 4 items I need to show item on ion-slide. I will explain more

1) First I take only four objects in arrays .I need to show two in each row as shown in image

2) If there is more then four objects I need to scroll horizontally using ion-slide ..Actually In my demo it is showing only one column on each row why ?

here is my code 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>

Upvotes: 1

Views: 1291

Answers (2)

J-D
J-D

Reputation: 1575

Try changing your code something like below which take advantage of $index 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>

Please follow below link to see it in action.

play.ionic.io

Upvotes: 1

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

I have made a small demo for you as per the requirement,

Plunker

Contoller

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

If you need more features.Please let me know

Upvotes: 1

Related Questions