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中检测到？

所以我会用这样的东西结束一些事情

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

Answer 2

您必须创建一个方法来检查当前项目是否是今天的最后一项：

<li ng-repeat="task in todoList">
    <div ng-switch="lastToday(task)">
        <div ng-switch-when="false">{{task.name}}</div>
        <h3 ng-switch-when="true">Next period</h3>
    </div>
</li>

$scope.lastToday = function(task) {
    return ($scope.todoList.reverse().find(t => t.when === 'Today') || {} ).name === task.name;
}

Answer 3

<li ng-repeat="task in todoList" ng-show="!$last">
    {{task.name}}
</li>
  <li ng-repeat="task in todoList" ng-show="$last">
   <h3>Next period</h3>
</li>

$ last 将对此有所帮助

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

3 个答案: