How can I make the parent menu active in AngularJS when a submenu is selected?

I have set up the Menu and Submenu in the following way:

<li>
    <a href="#/solution" ng-class="{ current: isActive('/solution') }" >
        <i class="halflings white home"></i> 
        {{menu.home}}
    </a>
</li>

The Solution menu is active when I am on localhost/solution. How can I make the parent menu active when a submenu is active? Something like this:

current: isActive('/solution/1,/solution/2,/solution/3,/solution/.....'). 

This is my isActive method:

$scope.isActive = function (viewLocation) {
    var active = (viewLocation === $location.path());
    return active;
};

Answer №1

To confirm using a regular expression, follow these steps:

<li>
    <a href="#/solution" ng-class="{ current: isActive(/^\/solution/) }" >
        <i class="halflings white home"></i> 
            {{menu.home}}
    </a> 
</li>

You are utilizing a regexp in the isActive function to match any string beginning with "/solution"

The isActive function will then compare the URL against the regexp like this:

$scope.isActive = function (viewLocation) {
  return viewLocation.test($location.path());
};

To understand how it functions, refer to the documentation on JS's regexp and regex#test

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

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

Encoding the data set into a JSON format while categorizing it into

I'm currently developing an angular and nodejs application that requires data from sql in json format to be grouped in a tree-like manner. I have successfully retrieved the data in json format, but now I need it organized in a specific way. Is there a ...

Tips on transferring HTTP data from a service to a controller in AngularJS

var locationListCtrl=function($scope, loc8rData){ $scope.message = "Looking for nearby places"; loc8rData .success(function(data){$scope.message = data.length > 0 ? "" : "No locations Found"; ...

Angular.js: Utilizing ng-repeat to iterate through items within an object

There are two ng-repeats on the page that share an Object. The items should only be repeated if they match the type data. Sample Object $scope.events = [ { date: "1/16/13", time: "11:30", ...

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

My goal is to search for all hyperlinks on a webpage that contain an XML download link and download them in a continuous loop. When I click on these hyperlinks, a form pops up that needs to be completed before I can proceed with the download. However, I ...

Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is: .header { background: rgba(white, 0); &.fixed-top { background: rgba(white, 1); border-bottom: solid whitesmoke 1px; position: fixed; top: 0; right: 0; left: 0; ...

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

Validating textfields and dropdowns for dynamic HTML identifiers using jQuery

I am attempting to validate a dropdown and text field together. Both fields can either be left empty or both must be filled. The HTML ids are generated dynamically. I have tried the code below but it is not working as expected. Here are the resources I use ...

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

Page refresh problems

Hey, I'm facing an issue with page refresh. Every time I hit the refresh button on the browser while on a page other than the index, I encounter a "Server Error in '/' Application." 404 error Page. The back forward button works fine, but th ...

Utilizing ng-href in Angular.js Template: A Guide

I am attempting to develop a simple Single Page Application (SPA) with just one index.html file that includes templates. However, I encountered an issue with the ng-href directive: <a ng-href="#/myPage">myPage</a> This works fine in index.h ...

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

Having trouble injecting $ionicHistory into my AngularJS controller

I am encountering an issue with using $ionicHistory.goBack() in a Controller within my Angularjs/Ionic application. Upon attempting to inject it into my controller as shown below app.controller('ClockInController', function($scope, $http, JobDat ...

Comparing ID numbers and adding them together before storing them in a new array

In order to consolidate numbers with the same sequence ID and store the total sum in a new array named 'final', follow the steps below: INPUT => $scope.initial = [{seq:11, name:'ABC', number:20}, {seq:11, name:&ap ...

Are you making the switch to Bootstrap 4 from Bootstrap 3?

Currently, I am utilizing bootstrap 3 in my project. Upon discovering that Bootstrap 4 is a significant overhaul of the entire Bootstrap project, I am contemplating whether it is essential to transition from version 3 to 4. Is there a compelling reason t ...

The InjectionToken component is not exported by AngularFire

I am running into some challenges while trying to develop an Angular-Fire application. I was following a specific tutorial which can be found at: However, when I integrate angular-fire into my application, I encounter an issue where the "server" fails to ...

Creating a Submenu with HTML and CSS

After trying several guides on creating sub-menus, some involving JS, I decided to attempt a CSS-only approach. Unfortunately, I have encountered difficulty in making the submenu function correctly. You can view my code on fiddle here: http://jsfiddle.net ...