javascript - Angular 1.5 - 在具有特定属性的最后一个元素之后插入自定义元素

Question

假设我有以下代码:

<li ng-repeat="task in todoList">
    {{task.name}}
</li>

假设这是我的数据集(假设它是按时间排序的，从现在到将来):

var todoList = [ { name : 'Work hard', when : 'Today'}, { name : 'Play hard', when : 'Today'}, { name : 'Relax hard', when : 'This week'}, ]

如何在 ng-repeat 中检测当前重复项是设置为 Today 时具有该属性的最后一项？

所以我会用这样的东西结束

<li ng-repeat="task in todoList">
    {{task.name}}
</li>
<!-- If last of current period, then show this -->
<li>
    <h3>Next period</h3>
</li>

Answer 1

您可以尝试按when 对数据进行分组，然后在结果集上重复:

<ul ng-repeat="(when, tasks) in todoList | groupBy: 'when'">
  When: {{ when }}
  <li ng-repeat="task in tasks track by $index">
    <span ng-hide="$last">{{task.name}}</span>
    <h3 ng-show="$last">Next period</h3>
  </li>
</ul>

---

编辑 1:

如果只想显示今天的数据，可以直接过滤掉todoList，然后渲染:

<li ng-repeat="task in todoList | filter:{ when: 'Today' }">
  <span ng-hide="$last">{{task.name}}</span>
  <h3 ng-show="$last">Next period</h3>
</li>