web-dev-qa-db-fra.com

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

J'essaie de montrer/cacher du HTML en utilisant les fonctions ng-show et ng-hide fournies par AngularJS =.

Selon la documentation, les utilisations respectives de ces fonctions sont les suivantes:

ngHide - {expression} - Si l'expression est véridique, l'élément est affiché ou masqué, respectivement. ngShow - {expression} - Si l'expression est vérité, 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’objet comme expression, les valeurs ng-hide et ng-show reçoivent la valeur _ true/false correcte, mais elles ne sont pas traitées comme des valeurs. booléen donc toujours retourner 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. J'espérais donc que quiconque comprendrait mieux AngularJS pourrait m'aider?

angularjsng-showng-hide
194
My Head Hurts

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>

Angular expressions doit être dans les liaisons entre accolades, où Angular directives ne le font pas.

Voir aussi Comprendre Angular Modèles .

374
My Head Hurts

Vous ne pouvez pas utiliser {{}} lorsque vous utilisez angular pour lier avec ng-model, mais pour lier des attributs non angulaires, vous devez utiliser {{}} ..

Par exemple:

ng-show="my-model"
title = "{{my-model}}"
31
SHIVANG SANGHI

Essayez d’emballer l’expression avec:

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

Puisque ng-show est un attribut angular, je pense qu'il n'est pas nécessaire de mettre les crochets de fleur d'évaluation ({{}}) ..

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

7
Rajkamal Subramanian
<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>
7
Anil Singh

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

Pour 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>
0
Vijay Kumar Reddy