My Head Hurts My Head Hurts - 2 months ago 13
AngularJS Question

AngularJS: ng-show / ng-hide

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?

Answer

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.

Comments