imbond imbond - 4 months ago 11
AngularJS Question

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>


This is important to note that, using ng-class I shall find active tab and it works properly.

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!