首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >AngularJS如何忽略ng-repeat中隐藏的表行,但保留增量?

AngularJS如何忽略ng-repeat中隐藏的表行,但保留增量?
EN

Stack Overflow用户
提问于 2017-05-15 23:17:49
回答 2查看 491关注 0票数 0

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

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

我发现data = "done“并没有从DOM中完全删除,并且仍然在列表中重新聚集,从而中断了增量。如下图所示:

list increment disruption

因此,第2行和第3行是等于"done“的数据。我能做些什么来忽略它们?

这是我的标记:

代码语言:javascript
代码运行次数:0
运行
复制
<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等,并且不会在任务状态列中显示”完成“。

EN

回答 2

Stack Overflow用户

发布于 2017-05-15 23:27:42

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

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

编辑:为了清楚起见,我认为您应该将ng-if更改为自定义过滤器,并在ng-repeat对过滤后的数组进行索引之前应用它:

代码语言:javascript
代码运行次数:0
运行
复制
<tr ng-repeat="issue in (filteredIssues = (issues | orderBy: '-fields.customfield_12401' | filter: customFilterFunction))">

  <td>{{ $index + 1 }}</td>
票数 1
EN

Stack Overflow用户

发布于 2017-05-16 00:13:00

您应该能够将ng-if作为筛选器保留,还可以通过简单地将$index作为track by移动到ng-repeat来不断递增$index

代码语言:javascript
代码运行次数:0
运行
复制
<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来从数组中删除"done“行。

代码语言:javascript
代码运行次数:0
运行
复制
<tr ng-repeat="issue in ((issues | removeDoneRows) | orderBy: '-fields.customfield_12401') track by $index" >

...and你的removeDoneRows过滤器(请想出一个更好的名字):

代码语言:javascript
代码运行次数:0
运行
复制
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;
    };
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43983091

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档