examples - AngularJS: ng-show/ng-hide no funciona con la interpolación `{{}}`
ng-show angularjs (7)
Estoy tratando de mostrar / ocultar algo de HTML usando las funciones ng-show y ng-hide proporcionadas por AngularJS .
Según la documentación, el uso respectivo de estas funciones es el siguiente:
ngHide - {expresión} - Si la expresión truthy entonces el elemento se muestra u oculta respectivamente. ngShow - {expresión} - Si la expresión es veraz, 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, si usamos un parámetro de un objeto como la expresión, a los valores ng-hide y ng-show les asigna el valor true / false correcto, pero los valores no se tratan como booleanos, por lo que siempre se devuelve 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 información relativa sobre la referenciación de parámetros de objetos como expresiones, por lo que esperaba que alguien con una mejor comprensión de AngularJS pudiera ayudarme?
Como ng-show es un atributo angular, creo, no necesitamos colocar los corchetes de la flor de evaluación ( {{}} ) ..
Para atributos como class necesitamos encapsular las variables con corchetes de flores de evaluación ( {{}} ).
Intenta envolver la expresión con:
$scope.$apply(function() {
$scope.foo.bar=true;
})
La referencia foo.bar 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 expressions angulares deben estar dentro de los enlaces de llaves, donde las directives angulares no lo hacen.
Consulte también Descripción de las plantillas angulares .
No puede usar {{}} cuando use directivas angulares para enlazar con ng-model pero para vincular atributos no angulares tendría que usar {{}} ..
P.ej:
ng-show="my-model"
title = "{{my-model}}"
Si desea mostrar / ocultar un elemento en función del 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 es verdadero, oculto cuando es falso.
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>
<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>