Question

我目前有两行，每行有2 SPAN。我想要做的是用DIV指令替换这些硬编码的SPAN和ng-repeat。

我的问题是我的4 SPAN超过4行，或者他们都是同一个。

Angular.js是否可行？

我在ng-repeat-start和ng-repeat-end上阅读了一些内容，但我不确定这可以帮助我。

这是给你的一个Plunker：http://plnkr.co/edit/DEf2JSTFDBvDXusJDsX7?p=preview

谢谢！

修改为了简单起见，我在Plunker示例中使用了SPAN但是在我的真实世界问题中，我使用的是自举网格，事实上，每个<div class="col-xs-12 col-md-3">都有2 <div class="row"> 。我希望能够澄清一切。

Answer 1

不好但是有效

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

解决方案取决于你想要实现的目标

另一个选择是将数据组织为不是平面数组而是数组数组

[
  [1,2],
  [3,4],
  [5],
]

在ng-repeat中进行ng-repeat

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

Answer 2

最好使用ng-repeat的$ even和$ odd属性。

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

OR，

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

Answer 3

使用bootstrap非常简单：

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

如果您不希望它为100％，您甚至可以设置包装div的宽度。

Plunker：http://plnkr.co/edit/J0bKs0BeGW7ltqtnQbNC?p=preview

Answer 4

如果你的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>

然后你可以考虑使用ng-repeat [需要<br>]

来做这件事

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

希望它能解决你的目的。

Angular ng-repeat超过2行

4 个答案: