I am trying to show / hide some HTML using the ng-show
and ng-hide
functions provided by AngularJS.
According to the documentation, the respective usage for these functions are as follows:
ngHide – {expression} - If the expression truthy then the element is shown or hidden respectively.
ngShow – {expression} - If the expression is truthy then the element is shown or hidden respectively.
This works for the following usecase:
<p ng-hide=\"true\">I\'m hidden</p>
<p ng-show=\"true\">I\'m shown</p>
However, should we use a parameter from an object as the expression then the ng-hide
and ng-show
are given the correct true
/false
value but the values are not treated as a boolean so always return 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>
Result
<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>
This is either a bug or I am not doing this correctly.
I cannot find any relative information on referencing object parameters as expressions so I was hoping anyone with a better understanding of AngularJS might be able to help me out?
The foo.bar
reference should not contain the braces:
<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 need to be within the curly-brace bindings, where as Angular directives do not.
See also Understanding Angular Templates.
You can\'t use {{}}
when using angular directives for binding with ng-model
but for binding non-angular attributes you would have to use {{}}
..
Eg:
ng-show=\"my-model\"
title = \"{{my-model}}\"
Try wrapping expression with:
$scope.$apply(function() {
$scope.foo.bar=true;
})
Since ng-show
is an angular attribute i think, we don\'t need to put the evaluation flower brackets ({{}}
)..
For attributes like class
we need to encapsulate the variables with evaluation flower brackets ({{}}
).
<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>
remove {{}} braces around foo.bar because angular expressions cannot be used in angular directives.
For More: https://docs.angularjs.org/api/ng/directive/ngShow
example
<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>
If you want to show/hide an element based on the status of one {{expression}} you can use ng-switch
:
<p ng-switch=\"foo.bar\">I could be shown, or I could be hidden</p>
The paragraph will be displayed when foo.bar is true, hidden when false.