J'essaie d'afficher ou de masquer du code HTML à l'aide des fonctions ng-show
et ng-hide
fournies par [AngularJS] (http://docs.angularjs.org/api).
Selon la documentation, l'utilisation respective de ces fonctions est la suivante :
ngHide - {expression} - Si l'expression est vraie, alors l'élément est affiché ou caché respectivement. ngShow - {expression} - Si l'expression est vraie, l'élément est affiché ou caché respectivement.
Cela fonctionne dans le cas d'utilisation suivant :
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
Cependant, si nous utilisons un paramètre d'un objet comme expression, les valeurs correctes "vrai" ou "faux" sont attribuées à "ng-hide" et "ng-show", mais les valeurs ne sont pas traitées comme des booléens et renvoient toujours "faux" :
Source
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>
Résultat
<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>
Il s'agit d'un bogue ou je ne fais pas les choses correctement.
Je ne trouve aucune information relative au référencement des paramètres d'objets en tant qu'expressions. J'espérais donc que quelqu'un ayant une meilleure compréhension d'AngularJS pourrait m'aider ?
La référence foo.bar
ne doit pas contenir les accolades :
<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>
Les [expressions] (http://docs.angularjs.org/guide/expression) d'Angular doivent se trouver à l'intérieur des accolades, ce qui n'est pas le cas des [directives] (http://docs.angularjs.org/guide/directive) d'Angular.
Voir également Understanding Angular Templates.
Puisque ng-show
est un attribut angulaire je pense, nous n'avons pas besoin de mettre l'évaluation entre parenthèses ({{}}
) .
Pour les attributs comme class
, nous devons encapsuler les variables avec des crochets d'évaluation ({{}}
).