Angularjs 重复2行

我目前有两行，每行上有2个

SPAN

。 我想做的是用

ng repeat

指令替换这些硬编码的

DIV

和

SPAN

我的问题是我的4个

SPAN

超过4行，或者它们都在同一行上

使用Angular.js是否可行

我阅读了

ng repeat start

和

ng repeat end

上的内容，但我不确定这是否对我有帮助

这是给你的礼物：

谢谢

编辑： 为了简单起见，我在我的Plunker示例中使用了

SPAN

，但在我的实际问题中，我使用了一个引导网格，事实上，每个

中有2个

。我希望这能澄清问题。

不太好，但效果不错

<div class="row" ng-repeat="i in [1,2,3,4]" ng-if="$even"><span>{{i}}</span><span>{{i+1}}</span></div>

让ng在ng重复中重复

<div class="row" ng-repeat="i in myArray">
     <span ng-repeat="j in i">{{j}}</span>
</div>

{{j}

最好使用ng repeat的$偶数和$奇数属性

<div class="row">
    <span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
      <br ng-if="$odd">
    </span>
  </div>

{{i}

或者

{{i}

使用引导非常简单：

<div class="row">
  <div class="col-xs-6" ng-repeat="i in [1,2,3,4]">
    {{i}}
  </div>
</div>

{{i}

如果不希望包装器div的宽度为100%，甚至可以将其设置为100%

---

Plunker:

如果您的html看起来像：

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>1</span>
     <span>2</span>
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>3</span>
     <span>4</span>
  </div>
</div>

1.
2.
3.
4.

<>你可以考虑用NG重复[No.<代码>
<代码> >

<div class="row">
  <div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
    <span >{{i}}</span>
    <span >{{i+1}}</span>
  </div>
</div>

{{i}
{{i+1}}

---

希望它能解决您的问题。

您已经包含了引导标签。。。您是否对使用引导的解决方案感兴趣？因此，请更新您的plunker并在那里添加引导..谢谢，这是最适合我的解决方案。但不幸的是，我在这里仍然有重复…我更新了我的答案，你们可以检查一下，这允许你们尽可能多的列，但这不适用于引导网格。有关详细信息，请参见我的编辑。

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>1</span>
     <span>2</span>
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>3</span>
     <span>4</span>
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
    <span >{{i}}</span>
    <span >{{i+1}}</span>
  </div>
</div>