CODEWITHSUNDEEP
angularjs
Lovelock
Lovelock

Reputation: 8075

Angular ng show correctly switching to false / true but not hiding / showing

Working on a follow feature and using this as the two buttons:

<button ng-show="{{project[0].is_following.length > 0}}"
    class="button button-block button-balanced"
    ng-click="followProject()"
    type="submit">UnFollow
</button>
<button ng-show="{{project[0].is_following.length === 0}}"
    class="button button-block button-dark"
    ng-click="followProject()"
    type="submit">Follow
</button>

On my API doing what It needs to, I can see the buttons switching between ng-show="true" and ng-show="false" as I follow / unfollow they switch between the buttons.

However, the buttons themselves do not hide / show. They just stay the same.

Where is my fault?

Upvotes: 1

Views: 441

Answers (2)

GregL
GregL

Reputation: 38103

ng-show and ng-hide take Angular expressions. This means you don't need the {{curly braces}}.

Remove them and it will be fine.

So what's the difference?

The curly braces are used in Angular to do string interpolation - placing the value of some scope expression inside a string. So if something is expecting a string, such as in HTML or where an attribute value is treated as a string, then you use the {{curly brackets}}. Otherwise, if you are specifying a condition or expression which shouldn't be treated as a string, you should not use the curly brackets.

Upvotes: 2

Gustavo Hoirisch
Gustavo Hoirisch

Reputation: 1657

You are printing the value out of your expression. ng-show needs the expression itself. Try this:

<button ng-show="project[0].is_following.length > 0"
   class="button button-block button-balanced"
   ng-click="followProject()"
   type="submit">UnFollow
</button>
<button ng-show="project[0].is_following.length === 0"
   class="button button-block button-dark"
   ng-click="followProject()"
   type="submit">Follow
</button>

Upvotes: 4

Related Questions