AngularJS Comment puis-je ignorer les lignes de table cachées dans ng-repeat mais conserver l'incrément?

Question

J'ai une ng-repeat qui génère une série de lignes de table. Une colonne est intitulée "état de la tâche" et si l'état affiche "terminé", je ne vois aucune raison de l'afficher, car le travail a été terminé.

J'ai utilisé ng-show = valeurs! = 0; cela a fonctionné initialement jusqu'à ce que j'aie ajouté un incrément pour numéroter les tâches. Ce que j'ai trouvé, c'est que les données = "done" n'étaient pas totalement retirées du DOM et continuaient à reger dans la liste, perturbant l'incrément. Voir image ci-dessous:

list increment disruption

Ainsi, les lignes 2 et 3 sont des données qui sont égales "fait". Que puis-je faire pour les ignorer?

Voici mon code:

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

Donc, tout ce qui vient de « issue.fields.status.statusCategory.name » doit être ignoré si la priorité (première colonne) va, 1,2,3 , 4,5 etc et ne pas afficher "fait" la colonne Etat de la tâche.

Answer 1

Je pense que la meilleure façon de gérer cette situation est de filtrer le tableau en premier. Vous pouvez filtrer le tableau tout dans l'expression ng-repeat, il suffit de conserver une variable de la sortie du filtre que vous pouvez référencer dans le modèle (si vous en avez besoin).

Découvrez la réponse à cette question SO: AngularJS - how to get an ngRepeat filtered result reference

modifier: clarifier Je pense que vous devriez changer votre ng, si dans un filtre personnalisé, et l'appliquer avant que les indices ng-répétition du tableau filtré:

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

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

Answer 2

Vous devriez être en mesure de garder votre ng-if comme un filtre et aussi garder votre incrémenter $index en déplaçant simplement votre $index au ng-repeat comme track by:

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

Votre $index doit correspondre à l'index du for-each en cours d'exécution, même avec le ng-if implémenté.

MISE À JOUR: Je crois que j'ai mal interprété votre question. Vous voulez que votre $index vous passe les lignes "terminées"? Ce n'était pas clair ...

Comme @ Ericson578 suggéré, vous devriez faire un filter personnalisé pour supprimer les lignes "fait" de votre tableau.

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

... et votre filtre removeDoneRows (s'il vous plaît trouver un meilleur nom pour ce):

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