How to ng-show some html content base on the current route?

Question

I have a single page with angular and the content look like this:

And when I click on some tab, for example "Servicios", the services content is shown under the tabs.

Here is the respective code:

<a href ng-click="tab.setTab(4)">Servicios</a>

....

  <perfil-content ng-show="tab.isSet(2)"></perfil-content>

  <brand-content ng-show="tab.isSet(3)"></brand-content>

  <service-content ng-show="tab.isSet(4)"></service-content>

All this is in an unique route, for example: http://localhost:9000/#/

Now what I want is that when http://localhost:9000/#/services is given, show the services content like when is clicked.

I tried this:

<service-content ng-show="location.hash == '#/services'">

but do not works.

Thank you, for any help.

look at this post: http://stackoverflow.com/questions/37011439/angularjs-ui-router-state-help-needed/37013154#37013154 — oguzhan00, May 04 '16 at 20:47

Pratik Bhattacharya · Accepted Answer · 2016-05-04T20:51:18.407

The best way to approach this problem is via the usage of ui.router. Create state for each tab and the use to use it. Take a look this link for more information about the usage of ui-router.

Config

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
  .state("shell", {
   url: "",
   templateUrl: "/shell.html"
  })
 .state("shell.services", {
   url: "/services",
   controller: "servicerCtrl",
   templateUrl: "/services.html"
 })
.state("shell.profiles", {
   url: "/profiles",
   controller: "servicerCtrl",
   templateUrl: "/services.html"
});
});

Shell.html

<ul>
  <li href="/services">Services</li>
  <li href="/services">Profiles</li>
</ul>
<ui-view></ui-view>

However if you do not want to use ui-router you can inject $route, $routeParams in your controller and then extract the route from there and based on that set your condition in the HTML. However I would strongly suggest that you use ui-router as a solution.

score 1 · Answer 2 · answered May 04 '16 at 22:02

I agree with the other answers, ui-router would be way ore efficient for that. And it provide a usefull filter called isState, you can use it like this :

<perfil-content ng-show="{{'perfil' | isState}}"></perfil-content>

<brand-content ng-show="{{'brand' | isState}}"></brand-content>

<service-content ng-show="{{'service' | isState}}"></service-content>

this way, it automaticcaly display the right component depending of the state you're in. (of course your states should have the right names perfil, brand and service)

score 0 · Answer 3 · answered May 04 '16 at 21:26

While using ui.router and parent and child states is a nicer solution. I went ahead and tried to this with $location

Here's a snippet. You can play around with it on plnkr.

http://plnkr.co/edit/pfYjxwaTTvngMjZdh5O4

// Code goes here

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($location) {
  this.isTab = function(str) {
    return $location.path() === '/' + str;
  };
});

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller='MyCtrl as ctrl'>
  <h1>Hello Plunker!</h1>
  <a href="#/tab1">Tab 1</a>
  <a href="#/tab2">Tab 2</a>
  <a href="#/tab3">Tab 3</a>
  <a href="#/tab4">Tab 4</a>

  <div ng-show='ctrl.isTab("tab1")'>
    <p>Content for tab 1</p>
  </div>
  <div ng-show='ctrl.isTab("tab2")'>
    <p>Content for tab 2</p>
  </div>
  <div ng-show='ctrl.isTab("tab3")'>
    <p>Content for tab 3</p>
  </div>
  <div ng-show='ctrl.isTab("tab4")'>
    <p>Content for tab 4</p>
  </div>
</body>

</html>

How to ng-show some html content base on the current route?

3 Answers3