Question

我试图在每个第n个元素中插入一个<br/>来实现这样的目标（使用ng-repeat和ng-if =“！（$ index％2）”）：

<div class="container">
    <div>
        <span>1</span>
        <span>2</span>
        <br/>
        <span>3</span>
    </div>
</div>

我以为我可以模仿我过去对<ul/>元素使用ng-repeat的方式，如下所示：

<div class="container">
    <ul ng-repeat="item in list">
        <li>{{item}}</li>
    </ul>
</div>

产生如下列表：

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

然而，当我尝试做这样的事情时：

<div class="container">
    <div ng-repeat="item in list">
        <span>{{item}}</span>
    </div>
</div>

我从<ul/>用例中得到了这个不同的结果：

<div class="container">
    <div>
        <span>1</span>
    </div>
    <div>
        <span>2</span>
    </div>
    <div>
        <span>3</span>
    </div>
</div>

问题是双重的：

为什么<ul/>上的ng-repeat指令表现不同
如何在div中包含多个span元素然后中断每个span？

Answer 1

https://docs.angularjs.org/api/ng/directive/ngRepeat

ngRepeat指令从a中为每个项目实例化一次模板采集。每个模板实例都有自己的范围，给定的范围 loop变量设置为当前集合项，并设置$ index 到项目索引或键。

在你的循环中，你的'item'有以下局部变量： $ index，$ first，$ middle，$ last，$ even，$ odd 。除$ index之外的每个都返回一个布尔值，告诉您该项是否为$ odd。另请查看指令ngClassEven。

Answer 2

ng-repeat行为等于任何标签，也许ul的预先设定造成混乱，

看下一个例子：

http://plnkr.co/edit/ig766DNNlQXihNS5ZGdY?p=preview

我分开了：

 <ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">

和

<legeng>ul - ng repeat</legeng>
<ul class="example-animate-container" ng-repeat="friend in friends">

Answer 3

<强>更新

如果您想每隔{n} <br>插入<span>，那么您可以将HTML更改为以下内容：

<div id="container">
    <span ng-repeat="item in list">{{item}}

          <br ng-if="$index % 2">
     </span>
</div>

在Firefox，Chrome和Internet Explorer中测试结果如下：

12
34
56

您所要做的就是删除周围的div元素，然后将html更改为以下内容（实时预览：http://codepen.io/larryjoelane/pen/qbJXJm）。 ng-repeat指令复制父元素中包含的子元素的数量。示例中的<li>元素不包含任何子元素。换句话说，<li>元素是默认情况下<ul>元素的子元素。但是，<span>元素默认情况下不是<div>元素的子元素。当您将ng-repeat用于<table>元素及其<tr>和<td>标记等其他元素时，您会看到类似的行为。

HTML：

<div ng-app="app" ng-controller="spans">

   <div id="container">
        <span ng-repeat="item in list">{{item}}
          </span>
  </div> 

      </div>

角/ JavaScript的：

angular.module("app", []).controller("spans", ["$scope", function($scope) {

  $scope.list = [1, 2, 3, 4, 5, 6];

}]);

如果您希望每个跨度都有换行符，请应用以下CSS：

#container span {
  display: block;
}

Answer 4

试试这个。

<div ng-repeat="num in [1,2,3,4,5,6]">
  <div>{{num}}</div>
  <div ng-if="$index%2">whatever you want</div>
</div>

结果看起来像这样。

1
2
whatever you want
3
4
whatever you want
5
6
whatever you want

Angularjs ng-repeat和子元素

4 个答案:

结果看起来像这样。