Is it possible to use a wildcard in Angular routes?

I created an isActive function to apply the active class to a menu element.

The function looks like this:

   $scope.isActive = function (path) {
        if (path == $location.path()) {
            return true;
        } else {
            return false;
        }
    }

In my HTML, I simply use:

   <li ng-class="{active: isActive('/page')}">
   <a href="page">Page</a></li>

However, this specific HTML is only defined once in my template. It would be more convenient to use:

   isActive('/page*')

This way, any URL path beyond '/page' will also receive the active state.

Has anyone discovered a workaround for this? I've searched forums and Angular documentation without success, so it seems this feature may not be available yet...

Answer №1

Could this be the solution?

$scope.isActive = function (path) 
{

    var strRegExPattern = '\\b'+path+'\\b'; 

    if( document.location.pathname.match(new RegExp(strRegExPattern,'g')) )
    {
        return true;
    } else {
        return false;
    }
}

Not sure if you can replace

document.location.pathname.match(... // VANILLA JS

with

$location.path().match(... // NG JS

Give it a shot and see how it goes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`What is the best way to access value during an onChange event?`

I'm currently utilizing react-input-calendar for my project. My goal is to extract the date value from the onChange event and then transfer it to a new page. Can someone provide guidance on how to achieve this? Here is the code snippet: constructor( ...

Employ a .js file in order to prevent encountering a 404 error

I am in the process of designing a webpage that displays plots and information from .csv files. As new files are added and old ones go away, I need the webpage to adjust dynamically based on which files are available. $.get('dir/'+myvar[1]+&apos ...

Leveraging the ReactJS Hook useState for detecting Key press events

As I am in the process of constructing a piano, I want it to showcase certain CSS styles when the user "presses" specific keyboard buttons (via keydown event) - even enabling the simultaneous clicking of multiple different buttons. Once the user releases t ...

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

Is there a way to restrict a file input element to only display XSD files? I attempted the following: <input type="file" accept="text/xsd" > Unfortunately, this method is not working as it still allows all file formats to be disp ...

Ensure that you correctly execute a JSON method

Can you assist with correctly calling the loadlist function using this JSON data below? I have attempted to call it as shown but it appears to not be functioning properly: loadlist($('select#selName').get(0), 'pull.php','data.nam ...

Guide to retrieving data from an object and organizing it into an array of strings based on certain criteria

I'm currently working on a function to extract values from an object and generate an array of strings. In the snippet below, I have provided an example of my progress so far, but it does not completely meet my requirements. For instance, consider th ...

Having trouble with the Aurelia JSPM install -y command not functioning properly on Windows

I am currently following the Aurelia tutorial at I am attempting to install Aurelia dependencies using Gulp and JSPM. I successfully ran "jspm install -y" without any issues. However, upon opening the browser console, I encountered the following error: ...

Preserving Search and Filter Settings in jQuery Data Tables

I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...

Vue.js - The table updates successfully, however, the data for the selected checkboxes remains unchanged

Encountered a persistent bug that is giving me some trouble. I have a table with rows that can be selected, and when a checkbox is checked, the total amount in the column should be calculated. However, whenever there is a change in the table data through ...

Organize array of objects according to specific attribute

Having an array of objects featuring 'id' and 'name' fields, the objective is to rearrange the sequence of the array starting from a specific 'id' obtained from the server. Here's an illustration with code: var myList = ...

Encase input elements with divs using a directive

Is it possible to simplify and streamline the code for form inputs? If so, how can this be done? For example, I have an input in my form structured like this: <input type="text" class="form-control" name="dirinput" placeholder="Placeholder" ...

Select the correct nested div with the same name by clicking on it

My problem involves nested div elements with the same class. For example, I have a Panel inside another Panel. However, when I click on the inner panel, it is actually the outer panel that triggers the $(".panel").click function. What I need is for the ...

What are the steps to ensure Submit() functions properly?

Two links on a jsp page share a common javascript function func1 as the handler for their onclick events. func1 submits a form that contains both links, resulting in a redirect to a servlet. func1 is defined as: function func1(someValue, form) { getEle ...

Unable to remove unnecessary shapes in a three.js project

In this simple example, I am adding a THREE.SphereGeometry to a THREE.Group and then including the group in the scene. After rendering the scene, my goal is to eliminate the group from the scene and dispose of the geometry. <html> <head> < ...

"Using jQuery $.extend will replace all content in the first object with the contents of the

Unfortunately, I am unable to provide a demonstration using anything other than code (no fiddle), but here is the issue at hand: Upon making an AJAX call to retrieve data from a JSON file and saving it to a variable, I then make another AJAX call to fetch ...

The process of extracting information from a JSON object and converting it into a dictionary in Python

By using the JavaScript code below, I am sending data from JavaScript to views.py: Javascript: $(document).ready(function(){ console.log("js2 working"); var jsonData={},a=0,key; $("#submit-button").click(function(e){ e.preventDefault(); $(&apos ...

Trigger a jQuery click event to open a new tab

On a public view of my site, there is a specific link that can only be accessed by authenticated users. When an anonymous user clicks on this link, they are prompted to log in through a popup modal. To keep track of the clicked link, I store its ID and inc ...

How come I am unable to reach the window in my Next.js application's '_app.js' file?

In my Next.js application, I am trying to implement a feature where the app loads and then checks for network access using a custom modal dialog that alerts the user if they lose internet connection. I have set up an _app.js file in my application to estab ...

Can you explain the concept of the "one true source"?

After reviewing this particular article, I came across a significant statement in the "Controlled Components" section: The integration of both can be achieved by ensuring that the React state is considered as the “single source of truth”. Can you ...

Using Jquery to empty a text field input value

It appears that I can successfully hide the resource container using resource.parent().parent().hide(); However, I am facing an issue with clearing the input value using resource.parent().siblings('.resource-value').children('input') ...