[英]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. 您能告诉我如何在每行中以角度显示两列吗?我需要在每行中显示两列。我试图在每张幻灯片中仅显示两行。如果还有更多我需要显示的4个项目离子幻灯片上的项目。 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 1)首先我只将四个对象放在数组中。我需要在每行中显示两个,如图所示
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 ? 2)如果有四个以上的对象,我需要使用离子滑动水平滚动。实际上,在我的演示中,每行仅显示一列,为什么?
here is my code http://play.ionic.io/app/95a2d932f578 这是我的代码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>
I have made a small demo for you as per the requirement, 我已根据要求为您制作了一个小型演示,
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 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 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 如果您需要更多功能,请告诉我
Try changing your code something like below which take advantage of $index of angularjs. 尝试像下面这样更改代码,以利用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>
Please follow below link to see it in action. 请点击下面的链接查看实际效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.