Question

我需要创建像这样的东西

<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>

但是，这两个值都是相同的......

Answer 1

您可以使用flexbox而不是尝试使用angular进行一些破解：

＆＃13;

* {
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 50%;
  height: 40px;
  padding: 8px;
}

＆＃13;

<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>

＆＃13;

它的优势在于，与具有角度的固定数量的列相比，您可以更轻松地制作响应式设计。

Answer 2

更新

    <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>

使用ng-repeat一次显示2个元素

2 个答案: