imbond imbond - 1 month ago 10
AngularJS Question

Why ng-show and ng-hide don't work with $route in angular?

In my application, I want to display a content based on active link, Example: if the link is "new" then "abc" and if link is "view" then "xyz" should be displayed. For that, I've used following code for my application.

<li><a href="#/new" ng-class="{active: $route.current.activetab == 'new'}">New</a></li>
<li><a href="#/view" ng-class="{active: $route.current.activetab == 'view'}">View</a></li>

<span class="white-text" ng-show="{{ $route.current.activetab === 'new' }}">new</span>
<span class="white-text" ng-show="{{ $route.current.activetab === 'view' }}">view</span>

Answer

When you use {{}}, the values are interpolated, i.e. the markup is replaced with the result of the expression. ngShow expects only the expression, so just use the function as it is, and it will work:

<span class="white-text" ng-show="$route.current.activetab === 'new' ">new</span>
<span class="white-text" ng-show="$route.current.activetab === 'view' ">view</span>

In general, you'll only want {{ }} when your expression / content should be displayed.

Hope this works!