AngularJS - cache l'élément parent si la boucle enfants est vide (filtrée)
J'ai un cas dans lequel j'ai boucles imbriquées dans lequel l'enfant est construit par une fonction de filtre qui prend parent comme argument. J'ai aussi un autre filtre qui fait juste une comparaison de textes. Voici l'exemple
<div ng-repeat="group in groups">
{{group.name}}
<div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search ">
{{material.name}}
</div>
</div>
Maintenant, mon problème est que lorsque filter:search
est appliqué et il filtre tous les résultats spécifiques du groupe, je tiens à cacher le groupe (et de ne pas laisser le vide group.name
suspendus sans éléments d'enfant).
Je n'ai pas le matériel dans le groupe lui-même, donc je n'ai pas cette information dans le parent ng-repeat portée. La question est de savoir si il existe un moyen pour que je puisse accéder à la imbriquée ng-repeat et voir son compte à partir de la mère et de cacher le parent si ce nombre est 0.
Mise à JOUR
Ici est un violon qui explique mieux la situation: violon
Le principal problème est que je ne veux pas associer mon matériel avec des groupes. Je ne pouvais faire que si rien ne fonctionne, mais il sonne comme une surcharge (depuis que je ne puis avoir besoin essentiellement de filtrer les résultats en deux fois) si je pourrais le faire par la simple vérification de la boucle imbriquée.
Grâce
source d'informationauteur Filip Kis
Vous devez vous connecter pour publier un commentaire.
Un beaucoup plus propre solution a été suggéré ICI.
Ce que vous devez faire est d'envelopper la zone concernée avec un ng-show /ng-si, sur la base d'une expression qui s'applique le filtre sur la structure des données et des extraits de la longueur. Voici comment cela fonctionne dans votre exemple:
Cela vous permet de masquer les structures complexes une fois qu'ils sont vides en raison d'un filtrage, par exemple, un tableau de résultats.
J'ai vu ce cas d'utilisation quelques fois, voici ma solution:
Vous pouvez utiliser le $premier $ou dernier dans le champ d'application de la ng-repeat pour afficher uniquement le premier et le dernier de chaque groupe. si il n'y a pas de $d'abord, il n'affiche pas le nom du groupe.
J'ai juste mis en œuvre sur mon blog et mise à jour de votre violon ici: http://jsfiddle.net/ke793/1/
Je ne suis pas sûr si c'est la solution la plus élégante, mais il semble assez simple et ça fonctionne. J'aimerais voir comment d'autres personnes ont résolu ce.
Mise à jour: il suffit de réaliser que vous pouvez utiliser
ng-if
pour éviter le nom du groupe de frapper les dom à l'extérieur de la$first
élément. Peu plus propre que ng-hide/ng-show, qui définitdisplay: none
à l'en-tête supplémentaire à chaque fois.Si vous pouvez demander les documents par groupe et vous vous attendez à faire pour chaque groupe de toute façon, pourquoi ne pas le faire immédiatement lors de l'initialisation de la vue et de construire un modèle avec des groupes qui ont des matériaux? Si vous pouvez faire cela, vous pouvez utiliser ng-show à seulement masquer les groupes qui ont des matériaux.
Vous semblez avoir besoin de savoir que ce groupe a les matériaux ou pas en quelque sorte? Voici un violon sans trop savoir de l'histoire de fond:
jouer avec des groupes