Ways to display specific HTML content using ng-show according to the current route?

Question

Ways to display specific HTML content using ng-show according to the current route?

I have a single page using Angular and the layout is as follows:

https://i.sstatic.net/XvPQO.png

When I click on a tab, for example "Services", the services content is displayed below the tabs.

Below is the relevant code snippet:

<a href ng-click="tab.setTab(4)">Services</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 of this is within a single route, for example: http://localhost:9000/#/

Now, what I want is that when http://localhost:9000/#/services is accessed, the services content should be displayed just like when it is clicked.

I tried the following code:

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

but it does not work properly.

Any help on this would be greatly appreciated. Thank you!

javascript angularjs angularjs-ng-show

Answer 1

Answer №1

To effectively tackle this issue, the recommended approach is to utilize ui.router. Establish a state for each tab and then employ it accordingly. For more detailed information on the application of ui-router, refer to this link.

Configuration

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>

Alternatively, if you opt not to use ui-router, you can inject $route, $routeParams into your controller to extract the route from there. Subsequently, based on that route, set the necessary conditions in your HTML structure. Nonetheless, it is strongly recommended to leverage ui-router as the preferred solution.

Answer 2

To effectively tackle this issue, the recommended approach is to utilize ui.router. Establish a state for each tab and then employ it accordingly. For more detailed information on the application of ui-router, refer to this link.

Configuration

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>

Alternatively, if you opt not to use ui-router, you can inject $route, $routeParams into your controller to extract the route from there. Subsequently, based on that route, set the necessary conditions in your HTML structure. Nonetheless, it is strongly recommended to leverage ui-router as the preferred solution.

Answer 3

Answer №2

My perspective aligns with the consensus in previous responses, utilizing ui-router would prove to be much more efficient in this scenario. This framework also offers a helpful filter known as isState, which can be implemented as shown below:

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

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

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

By following this approach, it automatically showcases the appropriate component based on the current state. It is important to ensure that your states are correctly named as perfil, brand, and service.

Answer 4

My perspective aligns with the consensus in previous responses, utilizing ui-router would prove to be much more efficient in this scenario. This framework also offers a helpful filter known as isState, which can be implemented as shown below:

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

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

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

By following this approach, it automatically showcases the appropriate component based on the current state. It is important to ensure that your states are correctly named as perfil, brand, and service.

Answer 5

Answer №3

Implementing parent and child states with ui.router is a more elegant solution. I decided to experiment with it using $location

Check out this code snippet below. Feel free to test it out on plnkr.

http://plnkr.co/edit/ABC123XYZ

// Your code can go here

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

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

<!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>Welcome to 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.checkTab("tab1")'>
    <p>Content for tab 1</p>
  </div>
  <div ng-show='ctrl.checkTab("tab2")'>
    <p>Content for tab 2</p>
  </div>
  <div ng-show='ctrl.checkTab("tab3")'>
    <p>Content for tab 3</p>
  </div>
  <div ng-show='ctrl.checkTab("tab4")'>
    <p>Content for tab 4</p>
  </div>
</body>

</html>

Answer 6

Implementing parent and child states with ui.router is a more elegant solution. I decided to experiment with it using $location

Check out this code snippet below. Feel free to test it out on plnkr.

http://plnkr.co/edit/ABC123XYZ

// Your code can go here

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

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

<!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>Welcome to 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.checkTab("tab1")'>
    <p>Content for tab 1</p>
  </div>
  <div ng-show='ctrl.checkTab("tab2")'>
    <p>Content for tab 2</p>
  </div>
  <div ng-show='ctrl.checkTab("tab3")'>
    <p>Content for tab 3</p>
  </div>
  <div ng-show='ctrl.checkTab("tab4")'>
    <p>Content for tab 4</p>
  </div>
</body>

</html>

Ways to display specific HTML content using ng-show according to the current route?

Answer №1

Answer №2

Answer №3

Similar questions

Submitting an Ajax form refreshes the page

Opt for specific data by default when working with multi data series on c3 charts

How can you elevate an HTML element to the front using the "z-index" property or the "append" method?

Tips for identifying the extreme points (minimum and maximum) within a fluctuating interval

JavaScript - Populate canvas with selected image from gallery upon clicking an image

Stream video files using NodeJS and seamlessly switch between audio tracks

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

Passing User Authentication State from Express/Passport to a React Client: A Step-by-Step Guide

Unresponsive jQuery dialog during Ajax request

Choosing a specific option from a list of multiple choices with javascript

Is there a way to identify extensive usage of JavaScript on a webpage using Python, Scrapy, and Selenium?

Utilizing AngularJS for a Simple AJAX GET Request

Determine the exact width of text without rounding in Javascript

Ways to trigger various functions upon alteration of minimum and maximum values in a range slider bar

Issue with cookies modification in Next.js 14 server actions

Looking for search suggestion functionalities in an HTML input field

Achieving left alignment for Material-UI Radio buttons: Float them left

A guide on accessing information from a post form using an express.js server

React App PWA ERROR: Service worker not registered to control the page and start_url

The combination of Ajax, JavaScript, PHP/HTML, and dynamic variables