AngularJS: ng-show / ng-hide no funciona con la interpolación `{{}}`

193

Estoy tratando de mostrar / ocultar algo de HTML usando las funciones ng-showy ng-hideproporcionadas por AngularJS .

Según la documentación, el uso respectivo para estas funciones es el siguiente:

ngHide - {expresión} - Si la expresión es verdadera, el elemento se muestra u oculta respectivamente. ngShow - {expresión} - Si la expresión es verdadera, entonces el elemento se muestra u oculta respectivamente.

Esto funciona para el siguiente caso de uso:

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

Sin embargo, debemos usar un parámetro de un objeto como la expresión a continuación, el ng-hidey ng-showse les da la correcta true/ falsevalor pero los valores no son tratados como un booleano por lo que siempre volver false:

Fuente

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

Resultado

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

Esto es un error o no lo estoy haciendo correctamente.

No puedo encontrar ninguna información relativa sobre la referencia de parámetros de objetos como expresiones, así que esperaba que alguien con una mejor comprensión de AngularJS pudiera ayudarme.

angularjs ng-show ng-hide Me duele la cabeza
fuente

Respuestas:

375

La foo.barreferencia no debe contener las llaves:

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

Las expresiones angulares deben estar dentro de los enlaces de llaves, donde las directivas angulares no lo hacen.

Consulte también Comprensión de plantillas angulares .

Me duele la cabeza
fuente
76
"Las expresiones angulares deben estar dentro de los enlaces de llaves, donde las directivas angulares no lo hacen". Esa línea justo ahí. Desearía poder votar esto dos veces.
MushinNoShin
3
Si desea verificar si el archivo tiene un valor de uso:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
czerasz
1
Gracias, esto no fue muy intuitivo (como se puede ver en todos los votos
positivos
1
La documentación para ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) llama específicamente al argumento una expresión, lo que significa que requiere llaves. ¿Que me estoy perdiendo aqui?
Ed Norris
1
Esta respuesta en realidad no es correcta. Las llaves indican que la expresión debe ejecutarse y su resultado debe insertarse en el DOM, mientras que la directiva puede o no tratar el valor del atributo como una expresión dependiendo de su lógica. Algunas directivas (ngHref) incluso admiten enlaces de llaves.
Vasaka
31

No se puede usar {{}}cuando se usan directivas angulares para enlazar con, ng-modelpero para enlazar atributos no angulares que tendría que usar {{}}.

P.ej: 

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

Intenta envolver la expresión con: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
hrn
fuente
77
el foo.bar = truedebería ser scope.foo.bar = true, para cambiar el valor defoo.bar
Rajkamal Subramanian
1
Tuve un problema extraño en el que a veces se mostraba y a veces no, envolviendo mis actualizaciones de alcance en $ scope. $ Apply (function () {}); funcionó para mí :)
nunca nuevo
Soy nuevo en angular y realmente prefiero no hacer esto cada vez que necesito establecer una variable. ¿Alguien puede explicar por qué esto a veces es necesario?
Davis
Una publicación de blog útil me ayudó a responder esto. Resulta que cualquier Ajax o personalizados oyentes tendrán problemas para actualizar y requieren un$scope.$apply
Davis
7

Como ng-showcreo que es un atributo angular, no necesitamos poner los corchetes de evaluación de flores ({{}} ).

Para atributos como classnecesitamos encapsular las variables con corchetes de evaluación de flores ( {{}}).

Rajkamal Subramanian
fuente
cerca - Lo examiné y parece que las expresiones angulares deben estar entre corchetes donde las directivas angulares no lo hacen
Mi cabeza duele
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
fuente
0

elimine {{}} llaves alrededor de foo.bar porque las expresiones angulares no se pueden usar en directivas angulares.

Para más información: https://docs.angularjs.org/api/ng/directive/ngShow

ejemplo

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

Si desea mostrar / ocultar un elemento basado en el estado de una {{expresión}} puede usar ng-switch:

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

El párrafo se mostrará cuando foo.bar sea verdadero, oculto cuando sea falso.

Roberto
fuente