AngularJS: ng-show / ng-hide ne fonctionne pas avec l'interpolation `{{}}`

193

J'essaie d'afficher / masquer du HTML en utilisant les fonctions ng-showet ng-hidefournies par AngularJS .

Selon la documentation, l'utilisation respective de ces fonctions est la suivante:

ngHide - {expression} - Si l'expression est véridique, alors l'élément est affiché ou masqué respectivement. ngShow - {expression} - Si l'expression est véridique, alors l'élément est affiché ou masqué respectivement.

Cela fonctionne pour 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, alors la ng-hideet ng-showreçoivent la valeur true/ correcte falsemais les valeurs ne sont pas traitées comme un booléen, donc retournez toujours false:

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

C'est soit un bug, soit je ne le fais pas correctement.

Je ne trouve aucune information relative sur le référencement des paramètres d'objet en tant qu'expressions, alors j'espérais que quiconque ayant une meilleure compréhension d'AngularJS pourrait m'aider?

angularjs ng-show ng-hide J'ai mal à la tête
la source

Réponses:

375

La foo.barréférence ne doit pas contenir d'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 angulaires doivent être dans les liaisons entre accolades, où en tant que directives angulaires contrairement aux .

Voir également Présentation des modèles angulaires .

J'ai mal à la tête
la source
76
"Les expressions angulaires doivent se trouver dans les liaisons entre accolades, contrairement aux directives angulaires." Cette ligne là. J'aimerais pouvoir voter deux fois.
MushinNoShin
3
Si vous voulez vérifier si le <p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
fichier
1
Merci, ce n'était pas très intuitif (comme vous pouvez le voir d'après tous les votes
positifs
1
La documentation de ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) appelle spécifiquement l'argument une expression, ce qui signifie qu'il nécessite des accolades. Qu'est-ce que j'oublie ici?
Ed Norris
1
Cette réponse n'est en fait pas correcte. Les accolades indiquent que l'expression doit être exécutée et son résultat doit être inséré dans le DOM, tandis que la directive peut ou non traiter la valeur d'attribut comme une expression en fonction de sa logique. Certaines directives (ngHref) prennent même en charge les liaisons entre accolades.
Vasaka
31

Vous ne pouvez pas utiliser {{}}lorsque vous utilisez des directives angulaires pour la liaison avec ng-modelmais pour la liaison d'attributs non angulaires que vous devez utiliser{{}} .

Par exemple: 

ng-show="my-model"
title = "{{my-model}}"
SHIVANG SANGHI
la source
18

Essayez d'habiller l'expression avec: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
hrn
la source
7
le foo.bar = truedevrait être scope.foo.bar = true, pour changer la valeur defoo.bar
Rajkamal Subramanian
1
J'ai eu un étrange problème où parfois il était affiché et parfois non, enveloppant mes mises à jour de portée dans $ scope. $ Apply (function () {}); travaillé pour moi :)
Nevernew
Je suis novice en angulaire et je préfère vraiment ne pas le faire à chaque fois que je dois définir une variable. Quelqu'un peut-il expliquer pourquoi cela est parfois nécessaire?
davis
Un article de blog utile m'a aidé à répondre à cette question. Il s'avère que tout écouteur Ajax ou personnalisé aura des problèmes de mise à jour et nécessitera un$scope.$apply
davis
7

Puisqu'il ng-shows'agit d'un attribut angulaire je pense, nous n'avons pas besoin de mettre les parenthèses d'évaluation des fleurs ({{}} ) ..

Pour des attributs tels que classnous devons encapsuler les variables avec des crochets de fleur d'évaluation ( {{}}).

Rajkamal Subramanian
la source
fermer - je l'ai regardé et il semble que les expressions angulaires doivent être entre crochets où les directives angulaires ne le font pas
Ma tête fait mal le
7 
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
    function controller($scope) {
        $scope.data = {
            show: true,
            hide: false
        };
    }
</script>

<div ng-controller="controller">
    <div ng-show="data.show"> If true the show otherwise hide. </div>
    <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>
Anil Singh
la source
0

supprimez les accolades {{}} autour de foo.bar car les expressions angulaires ne peuvent pas être utilisées dans les directives angulaires.

Pour en savoir plus: https://docs.angularjs.org/api/ng/directive/ngShow

exemple

  <body ng-app="changeExample">
    <div ng-controller="ExampleController">
    <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
    <p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
    </div>
    </body>

<script>
     angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.foo ={};
          $scope.foo.bar = true;
        }]);
</script>
Vijay Kumar Reddy
la source
-1

Si vous souhaitez afficher / masquer un élément en fonction du statut d'un {{expression}}, vous pouvez utiliser ng-switch:

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

Le paragraphe sera affiché lorsque foo.bar est vrai, masqué lorsqu'il est faux.

Roberto
la source