在Angular ng-repeat - Ionic Grid中每隔2个项目创建一行 [英] Create Row every after 2 item in Angular ng-repeat - Ionic Grid
本文介绍了在Angular ng-repeat - Ionic Grid中每隔2个项目创建一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要通过 ng-repeat 在我的应用程序中创建如下结构.
<div class="col-50">1</div><div class="col-50">2</div><div class="row"><div class="col-50">3</div><div class="col-50">4</div>
现在我的代码如下:
<label class="item item-radio col col-50" ng-repeat="a in question.answer"><input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct}}")'><div class="item-content"><img src="img/ans/{{ a.option }}"/><i class="radio-icon ion-checkmark"></i>标签>
但在上面的代码中,它只是我拥有的一个单行标签.我不想以某种方式让行标记包含/包装循环中的每 2 个项目.实现这一目标的最佳方法是什么?
参考: 离子网格文档
解决方案
我设法使用 $even
做到了.
<div class="row" ng-if="$even"><div class="col col-50">{{numbers[$index]}}</div><div class="col col-50">{{numbers[$index + 1]}}</div>
这是一个有效的 JSFiddle.
I need to create a strcuture as below in my app through ng-repeat.
<div class="row">
<div class="col-50">1</div>
<div class="col-50">2</div>
</div>
<div class="row">
<div class="col-50">3</div>
<div class="col-50">4</div>
</div>
Right now my code is as below:
<div class="row">
<label class="item item-radio col col-50" ng-repeat="a in question.answer">
<input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'>
<div class="item-content">
<img src="img/ans/{{ a.option }}" />
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
But in the above code, its just a single row tag that I have. I wan't to somehow get the row tag contain/wrap every 2 items in the loop. What is the best way to achieve this?
Ref: Ionic Grid Doc
解决方案
I managed to do it using $even
.
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50">{{numbers[$index]}}</div>
<div class="col col-50">{{numbers[$index + 1]}}</div>
</div>
</div>
Here's a working JSFiddle.
这篇关于在Angular ng-repeat - Ionic Grid中每隔2个项目创建一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!