使用ng-repeat一次显示2个元素
use ng-repeat to show 2 elements in one go
我需要创建如下内容
<div class="row">
<div class="col">
<div class="col">
<div>
现在我有一个数组有6个元素…因此,我需要创建如下内容:
<div class="row">
<div class="col"> 1 </div>
<div class="col"> 2 </div>
<div>
<div class="row">
<div class="col"> 3 </div>
<div class="col"> 4 </div>
<div>
<div class="row">
<div class="col"> 5 </div>
<div class="col"> 6 </div>
<div>
我不知道怎么做这个…我所尝试的…
<div class="row" ng-repeat="a in elem">
<div class="col"> {{a.name}} </div>
<div class="col"> {{a.name}} </div>
<div>
你可以使用flexbox:
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
width: 50%;
height: 40px;
padding: 8px;
}
<div class="row">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
</div>
它的优点是可以使响应式设计更容易,而不是使用固定数量的列。
已更新
<div class="row" ng-repeat="a in elem" ng-if="$even">
<div class="col"> {{elem[$index - 1].name}} </div>
<div class="col"> {{a.name}} </div>
<div>
相关文章:
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- Slding表单不会一次显示一个表单
- 一次显示/隐藏一个Javascript
- 一次显示一个标记-谷歌地图API v3
- 一次显示n个列表元素,jQuery
- 想要在fullcalendar插件的周视图中一次显示3天
- 用JavaScript制作战斗模拟器,无法一次显示整个模拟
- 尝试连续一次显示多个 php 文件
- 如何使用 javascript 一次显示此数组的字符串内容
- 如何保持一次显示一个悬停
- 引导轮播不起作用(一次显示所有图像)
- 在一个页面上一次显示所有“标题”工具提示
- 如何设置仅一次显示通知栏的cookie
- 从上到下的可见图像堆积:有没有办法一次显示
- 枚举内容滑块一次显示两个图像
- 使用 JS 随机化表行,同时一次显示一个表行
- 寻找一个JS滑块插件,它支持一次显示多张幻灯片,以及不同宽度的幻灯片
- 选择项目并一次显示n篇文章
- 一次显示一个DOM元素的淡入/淡出列表