Problème avec "ng-if" - Angular JS
Bonjour à tous,
Pour le besoin d'un de mes projets, j'ai créé un tableau grâce à Angular JS. Vous trouverez via le lien ci après, la version simplifiée de mon tableau final qui me cause quelques soucis : http://embed.plnkr.co/yLqaKZnhiKj8CUhs6SoR/
Sur la version présentée, j'ai un système de "sort" qui me permet de trier chaque colonne de mon tableau.
En parallèle, j'ai créé dans une liste de checkbox qui permet aux utilisateurs de choisir les colonnes qu'ils souhaitent afficher dans le tableau. Cette liste n'est pas présente dans le lien ci-dessus, mais vous trouvez dans le fichier script.js la variable "formData" qui gère l'affichage ou non des colonnes. Par défaut, la colonne pseudo reste toujours affichée, les deux autres colonnes peuvent être cachées (passer la valeur en false pour les cacher).
J'utilise dans l'affichage de mes colonnes "ng-if" pour vérifier la valeur de la variable. Si elle est à true, j'affiche la colonne. Ca fonctionne bien, mais ça casse ma fonction de tri. Essayez sur les pseudos, il est possible de trier les pseudos. Ca ne fonctionne pas pour les deux autres.
Si je vais dans le code HTML et que je supprime le "ng-if" dans le < th > de la ligne 32, il sera possible d'appliquer un tri sur les emails.
Pourquoi "ng-if" me casse mon système de tri ? Quelle aternative j'ai pour arriver à mes fins ? J'ai essayé d'appliquer un "ng-switch", mais j'ai le même résultat, le tri ne fonctionne plus sur les colonnes concernées.
Si je ne suis pas assez clair, n'hésitez pas à me le dire.
Merci d'avance !
3 réponses
Etant donné que la valeur me permettant d'afficher ou de cacher est true ou false, j'ai remplacé ng-if par un ng-show. Tout fonctionne correctement. Cependant, le fait que ng-if me bloque le tri de ma tableau reste un mystère.
Bonjour,
C'est normal que le code ne fonctionne pas en l'état. NgIf crée son propre scope, donc la variable orderByField que tu modifies pour le pseudo et pour l'email ne sont plus les mêmes lorsque le ngIf formData.email est à true. Le ngShow utilise le même scope que celui du Controller donc le problème n'apparait plus.
Voici ce que tu dois modifier si tu souhaites que ton code avec ngIf fonctionne :
<th ng-if="formData.email">
<-- on lance une fonction du controller avec un paramètre.
on ne modifie orderByField que dans le controller -->
<a href="#" ng-click="updateOrderByField('email');" >
Email
<span ng-show="orderByField == 'email'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>$scope.updateOrderByField = function(string) {
$scope.orderByField = string;
$scope.reverseSort = !$scope.reverseSort;
}Il vaut mieux ne pas modifier de variable directement dans la vue, mais plutôt le faire dans le Controller. Ce n'est pas à la vue d'endosser la responsabilité de la modification du scope.
HS1 : Dans ton exemple, je pense que le fonctionnement du reverse n'est pas celui attendu. Par défaut c'est id incrémental (au chargement de la page). J'imagine que lorsque tu cliques sur email, tu souhaites obtenir email (A-Z) et non email (Z-A) comme tu as à l'heure actuelle. Il faudrait définir un comportement par défaut pour chaque élément que tu souhaites ordonner (si tu as une date, tu peux la vouloir du plus récent au plus ancien par exemple).
Merci pour ta réponse. C'est beaucoup plus propre de faire la modification du reverseSort dans le controller effectivement. Pour ce qui est de l'afficher d'abord de A-Z ou Z-A, ce n'est pas un point bloquant pour moi.
Merci également pour la précision sur le fait que ng-if créé son propre scope. Ca explique pas mal de choses.