AngularJS How Can I Ignore hidden table rows in ng-repeat but keep the increment?

Question

I have an ng-repeat that generates a series of table rows. One column is titled "task status" and if the status is displaying "done", I see no reason in showing it, as the job has been completed.

I used ng-show = values != 0; this initially worked until I added an increment to number the tasks.

What I have found was that the data = "done" were not totally removed from the DOM and still regstering in the list disrupting the increment. See image below:

list increment disruption

So the rows 2 and 3 are data that equal "done". What can I do to ignore them?

Here is my markup:

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

So anything that comes from "issue.fields.status.statusCategory.name" needs to be ignored so the Priority (First Column) goes, 1,2,3,4,5 etc and not display "done" the Task Status Column.

This isn't a template problem. You have to calculate the priority yourself in a controller or directive when you set the value for issues. Avoid doing business logic in templates. — Reactgular, May 15 '17 at 15:24
I don't quite get what you're after. Do you want to skip certain lines but still increment `$index` for the lines that were skipped? — Lennholm, May 15 '17 at 15:31
use ng-hide="issue.fields.status.statusCategory.name == 'Done'" — Shohel, May 15 '17 at 16:32

score 1 · Answer 1 · edited May 23 '17 at 12:26

I think the best way to handle this situation is to the filter the array first. You can filter the array all in the ng-repeat expression, just retain a variable of the filter output that you can reference in the template (if you need to).

Check out the answer to this SO question: AngularJS - how to get an ngRepeat filtered result reference

edit: to clarify I think you should change your ng-if into a custom filter, and apply it before the ng-repeat indexes the filtered array:

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

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

WebWanderer · Answer 2 · 2017-05-15T16:23:29.447

You should be able to keep your ng-if as a filter and also keep incrementing your $index by simply moving your $index to the ng-repeat as track by:

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

Your $index should match the index of the for-each being performed, even with the ng-if implemented.

UPDATE: I believe I interpreted your question wrong. You want your $index to skip you "done" rows? That wasn't clear...

As @Ericson578 suggested, you should make a custom filter to remove the "done" rows from your array.

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

...and your removeDoneRows filter (please come up with a better name for this):

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;
    };
})

AngularJS How Can I Ignore hidden table rows in ng-repeat but keep the increment?

2 Answers2