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

Question

J'essaie d'afficher ou de masquer du HTML à l'aide de la fonction ng-show et ng-hide les fonctions fournies par AngularJS .

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

ngHide - {expression} - Si l'expression est vraie, 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 pour le cas d'utilisation suivant :

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

Cependant, si l'on utilise un paramètre d'un objet comme expression, alors la fonction ng-hide et ng-show reçoivent le bon true / false mais les valeurs ne sont pas traitées comme un booléen et retournent toujours false :

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>

Soit il s'agit d'un bogue, soit 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 ?

Answer 1

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

Angulaire expressions doivent se trouver à l'intérieur des accolades, alors qu'avec Angular directives ne le font pas.

Voir aussi Comprendre les modèles Angular .

Answer 2

Vous ne pouvez pas utiliser {{}} lors de l'utilisation de directives angulaires pour la liaison avec ng-model mais pour lier des attributs non-angulaires, vous devrez utiliser {{}} ..

Eg :

ng-show="my-model"
title = "{{my-model}}"

Answer 3

Essayez d'envelopper l'expression avec :

$scope.$apply(function() {
   $scope.foo.bar=true;
})

Answer 4

Depuis ng-show est un attribut angulaire je pense, nous n'avons pas besoin de mettre l'évaluation entre parenthèses ( {{}} )..

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

Answer 5

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