kpollock kpollock - 4 months ago 8
AngularJS Question

ng-show odd behaviour What's going on?

I have some weird behaviour going on with ng-show. I have a

post
, with
title
and
link
properties. Link may or may not exist. If it does, I want to show the title as a link, else just the title.

(The line:
<a href="{{post.link}}"> {{post.link}}</a>
is test code, and is only there to illustrate that
{{post.link}}
does, in fact, definitely contain a value.)

<a ng-show="{{post.link}}" href="{{post.link}}">
{{post.title}}
</a>

<a href="{{post.link}}"> {{post.link}}</a>


Gives me:

enter image description here

So, you can seem that
{{post.link}}
exists, is accessible and is populated ... but is still somehow evaluating to false as far as ng-show is concerned, and is not showing up. All I can see is the result of the test code.

Whereas, if I evaluate
true
, or even
{{post.title}}
, then the ng-show works.

I am baffled - what have I missed?

<a ng-show="true" href="{{post.link}}">
{{post.title}}
</a>
<a href="{{post.link}}"> {{post.link}}</a>


or

<a ng-show="{{post.title}}" href="{{post.link}}">
{{post.title}}
</a>
<a href="{{post.link}}"> {{post.link}}</a>


Gives me:

enter image description here

Answer

Ng-show doesn't need {{ ... }} as it uses variables directly. Change it to

ng-show="post.link"

{{ ... }} is only used when you want the output to be visible in the dom. ng-show is angular so you don't need it.