AngularJS如何忽略ng-repeat中的隐藏表行但保持增量？答案

【问题标题】：AngularJS How Can I Ignore hidden table rows in ng-repeat but keep the increment?AngularJS如何忽略ng-repeat中的隐藏表行但保持增量？
【发布时间】：2017-10-14 10:49:32
【问题描述】：

我有一个生成一系列表格行的 ng-repeat。一栏标题为“任务状态”，如果状态显示为“完成”，我认为没有理由显示它，因为工作已经完成。

我使用了 ng-show = values != 0;这最初是有效的，直到我添加了一个增量来对任务进行编号。

我发现 data = "done" 并没有完全从 DOM 中删除，并且仍然在列表中注册，从而破坏了增量。见下图：

list increment disruption

所以第 2 行和第 3 行是等于“完成”的数据。我能做些什么来忽略它们？

这是我的标记：

<table class="backlog table table-bordered table-striped" width="100%" border="0" cellpadding="0" cellspacing="0" summary="Our Jira Backlog">
      <tbody>
         <tr>
             <th>Priority</th>
             <th>Task Priority Score</th>
             <th>Task Summary</th>
             <th>Due date</th>
             <th>Task Status</th>
         </tr>
         <tr ng-repeat="issue in issues | orderBy: '-fields.customfield_12401'" ng-if="issue.fields.status.statusCategory.name != 'Done'">
         <td>{{ $index + 1 }}</td>
         <td>{{ issue.fields.customfield_12401 }}</td>
         <td>{{ issue.fields.summary }}</td>
         <td>{{ issue.fields.customfield_13700 }}</td>
         <td>{{ issue.fields.status.statusCategory.name }}</td>
         </tr>
      </tbody>
  </table>

因此，来自“issue.fields.status.statusCategory.name”的任何内容都需要被忽略，因此优先级（第一列）变为 1、2、3、4、5 等，而不显示“完成”任务状态栏。

【问题讨论】：

这不是模板问题。当您设置问题的值时，您必须自己在控制器或指令中计算优先级。避免在模板中做业务逻辑。
我不太明白你想要什么。是否要跳过某些行，但仍为已跳过的行增加 $index？
在将数据传递给模板之前过滤数据。
使用 ng-hide="issue.fields.status.statusCategory.name == 'Done'"

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

我认为处理这种情况的最好方法是先过滤数组。您可以在 ng-repeat 表达式中过滤所有数组，只需保留您可以在模板中引用的过滤器输出变量（如果需要）。

查看这个 SO 问题的答案：AngularJS - how to get an ngRepeat filtered result reference

编辑：澄清一下，我认为您应该将 ng-if 更改为自定义过滤器，并在 ng-repeat 索引过滤后的数组之前应用它：

<tr ng-repeat="issue in (filteredIssues = (issues | orderBy: '-fields.customfield_12401' | filter: customFilterFunction))">

  <td>{{ $index + 1 }}</td>

【讨论】：

【解决方案2】：

您应该能够将您的ng-if 保留为过滤器，并通过简单地将您的$index 移动到ng-repeat 作为track by 来不断增加您的$index：

<tr ng-repeat="issue in (issues | orderBy: '-fields.customfield_12401') track by $index" ng-if="issue.fields.status.statusCategory.name != 'Done'">

您的$index 应该与正在执行的for-each 的索引相匹配，即使已实现ng-if。

更新：我相信我对您的问题的解释是错误的。你想让你的$index 跳过你“完成”的行吗？不清楚...

正如@Ericson578 建议的那样，您应该创建一个自定义filter 以从您的数组中删除“完成”行。

<tr ng-repeat="issue in ((issues | removeDoneRows) | orderBy: '-fields.customfield_12401') track by $index" >

...和您的 removeDoneRows 过滤器（请为它想一个更好的名称）：

angular.module('myFilter', [])
.filter('removeDoneRows', function() {
    return function(arr) {
        var retval = [];
        for(var i = 0; i < arr.length; i++){
            if(arr[i].fields.status.statusCategory.name.toLowerCase() != "done")
                retval[retval.length] = arr[i];
        }
        return retval;
    };
})

【讨论】：