javascript - Angularjs ng-repeat 和子元素

Question

我正在尝试插入 <br/>每第 n 个元素实现这样的事情(使用 ng-repeat 和 ng-if="!($index % 2)"):

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

我想我可以模仿我过去如何使用 ng-repeat 来处理 <ul/>元素，因此:

<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 中的情况下让多个跨度元素然后中断？

Answer 1

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

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

在您的循环中，您的“项目”具有以下局部变量:$index、$first、$middle、$last、$even、$odd。每个除了 $index 都会返回一个 bool 值，告诉您该项目是否为 $odd。另请查看指令 ngClassEven .