AngularJS: ng-show / ng-hide no funciona con `{}}` interpolación
Estoy tratando de mostrar / ocultar algo de HTML usando las funciones ng-show y ng-hide proporcionadas por AngularJS.
De acuerdo con la documentación, el uso respectivo para estas funciones es el siguiente:
NgHide – {expression} - Si la expresión truth entonces el elemento se muestra u oculta respectivamente. ngShow – {expression} - Si la expresión es verdadera, 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 expresión, entonces ng-hide y ng-show reciben la expresión correcta true/false valor pero los valores no son tratados como un booleano por lo que siempre 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 estoy haciendo esto correctamente.
No puedo encontrar ninguna información relativa sobre la referencia de parámetros de objeto como expresiones, por lo que estaba esperando que alguien con una mejor comprensión de AngularJS podría ser capaz de ayudarme?
7 answers
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 expresiones Angular deben estar dentro de los enlaces entre llaves, mientras que las directivas Angular no lo hacen.
Véase también Comprender las plantillas Angulares.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-09 23:59:14
No se puede usar {{}} cuando se usan directivas angulares para enlazar con ng-model, pero para enlazar atributos no angulares se tendría que usar {{}}..
Eg:
ng-show="my-model"
title = "{{my-model}}"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-07 06:58:36
Intente envolver la expresión con:
$scope.$apply(function() {
$scope.foo.bar=true;
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-12 19:18:03
Dado que ng-show es un atributo angular creo, no necesitamos poner los corchetes de flores de evaluación ({{}})..
Para atributos como class necesitamos encapsular las variables con corchetes de flor de evaluación ({{}}).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-13 04:14:52
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-07 03:35:50
Retire {{}} las llaves alrededor de foo.porque las expresiones angulares no se pueden usar en directivas angulares.
Para Más: 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-13 20:33:59
Si desea mostrar u 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.la barra es verdadera, oculta cuando es falsa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-20 15:19:32