Highlighting the menu item in AngularJS based on a randomly generated address

Here is a code snippet that I need help with: Html

<li ng-class="{ highlight: isActive('/admin/trackDef/list') || isActive('/admin/trackDef/add')}">
    <a href="${createLink(uri: '/#/admin/trackDef/list')}"></a>
</li>

Javascript controller

.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
        return viewLocation === $location.path();
    };
    $scope.isAnyActiveAdmin = function () {
        return ['/admin/trackDef/list', '/admin/trackDef/add', '/admin/country/list','/admin/country/add', '/admin/user/list', '/admin/user'].indexOf($location.path()) > -1;
    };
}])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/admin/trackDef/list', {
            templateUrl: 'assets/trackDef/trackDef-list.tpl.html',
            controller: 'PaginatedListController',
            resolve: {Service: 'TrackDefServices'}
        }).
        when('/admin/trackDef/add', {
            templateUrl: 'assets/trackDef/trackDef-save.tpl.html',
            controller: 'TrackDefController'
        }).
        when('/admin/trackDef/:id', {
            templateUrl: 'assets/trackDef/trackDef-save.tpl.html',
            controller: 'TrackDefController'
        });
}])

I'm looking for a way to highlight pages with random addresses like:

/admin/trackDef/123 /admin/trackDef/234 /admin/trackDef/534

and so on

javascriptangularjs

Answer №1

Perhaps you could simplify the process by utilizing the JS function indexOf(), just like how it's implemented in isAnyActiveAdmin()

Your isActive() function could be structured as follows:

$scope.isActive = function () {
    return $location.path().indexOf("admin") ? true : false
};

With this, the function will effectively handle any paths containing "admin".

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

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

javascriptformsvue.jsbootstrap-4form-submit

Enhancing link functionality with jQuery on a dynamically generated server page

I am facing an issue with my navigation menu that includes dropdowns. On desktop, the parent items need to be clickable as well, which is not a problem. However, for it to be responsive on mobile devices, I need to account for the lack of hover capability. ...

javascriptjqueryhtml

Navigating through Leaflet to reference a .json file

Looking to integrate a .json vector layer into a Leaflet.js map, which can be seen on the GitHub page here, with the source code available here. Here's a condensed version of the file for reference (full version visible on the linked GitHub page). & ...

javascriptjsonleaflet

Switching from dark mode to light mode when reloading or navigating to a new page

Hello everyone. I've successfully implemented a dark mode toggle on my website, but I'm facing an issue where the mode resets whenever I navigate to a new page or refresh the current page. Can anyone help me figure out how to prevent this from ...

javascriptreactjstypescriptnext.js

Is it possible to open a PDF file in a new tab using Angular 4?

When attempting to open a PDF file using the window.open() function, I encountered an issue where the window would open and close automatically, causing the file to be downloaded rather than displayed in a new tab. Despite not having any ad blockers inst ...

javascriptangularpdf

A guide on using key arrows in JavaScript to navigate and focus on elements

When working on my HTML project, I have a list of elements that I want to be able to select using the arrow keys. I've included my code here for reference: [http://jsfiddle.net/T8S7c/] What I'm trying to achieve is when the arrow keys are press ...

javascripthtmlcss

Is there a way to convert various elements sharing the same class into a list of array items?

Essentially, I am dealing with multiple elements sharing the same class name. My goal is to retrieve an array of integers from an API and then iterate through each element with this class name, replacing them with elements from the array sequentially. For ...

javascripthtmlarraysclassweb

Discover the process of generating streams from strings in Node.Js

I am currently working with the library ya-csv, which requires either a file or stream input. However, I only have a string available. Is there a way to convert this string into a stream in Node.js? ...

javascriptstringnode.jsstreaminputstream

Encountering difficulty in interpreting angular function in JSON

Here is an example of my Json data: "review": { { "message_bar_text": "Please review your transaction details carefully. If you need to make changes after confirming, please call <a ng-click=\"callCSC(number)\">1-800-325-6000</a>. } ...

angularjsjson

By clicking the button, you can add an item to select2

Utilizing the select2 tag style in my Drupal YAML form allows users to easily locate and add various items. These items come with both images and titles on the same page, accompanied by a button next to each image. My goal is to enable users to click the b ...

javascriptjquerydrupaljquery-select2jquery-select2-4

Best way to pass a variable from an html form to a php function using ajax

I am currently developing a voting system for multiple uploads where each uploaded image is within a foreach statement. Each image has a form attached to it with three buttons to vote up, down, or not at all. These buttons are associated with an INT value ...

javascriptphpajaxvariablespost

What are some ways to avoid the use of underline and slash symbols in material-ui/pickers?

Is there a way to remove the underline and slash characters that separate day, month, and year in the material ui pickers for version mui version 4? <KeyboardDatePicker margin="normal" id="date-picker-dialog" label="Dat ...

javascripthtmlreactjsdatepickermaterial-ui

Assigning a custom class to the cdk-overlay-pane within a mat-select component is restricted to Angular Material version 10.2.7

I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There a ...

javascriptangulartypescriptangular-materialangular10

The XMLHttpRequest only retrieves up to 32 descendant objects from the JSON file, not all of them

I've encountered a peculiar issue with my XMLHttpRequest and JSON file. While I can successfully access the data, it seems to only iterate through 32 child objects within each parent object. Take, for example, this snippet from the routes.json file: ...

javascriptarraysjsonxmlhttprequest

How to populate an ExtJS 3.4 combobox with local JSON data in a few simple steps

I am utilizing ExtJS 3.4 and in need of populating a combobox with specific data obtained from a previous XMLHttpRequest, stored in a variable as follows: my_variable = "[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","no ...

javascriptjsonextjsextjs3

Whenever I navigate to this specific route, I consistently encounter an error message in my console

VM28353:1 Error: Unexpected token 'o' found in JSON at position 1 at JSON.parse (<anonymous>) at getUser (auth.js?c7d4:11) at wrappedGetter (vuex.esm-browser.js?5502:335) at Object.eval [as getUser] (vuex.esm-browser.js?5502 ...

javascriptvue.jsvuexvuejs3

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

javascriptvue.js

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between d ...

javascripthtmlcss

The URL for Ajax is not defined

I am currently working on a function that involves fetching an XML file and making some edits to it. This is new territory for me, so I had to do some research on the best approach to accomplish this task. After some consideration, I decided to use AJAX. H ...

javascriptjqueryajax

Having trouble with publishing to npm as public with the --access flag not functioning properly?

When trying to publish a fresh scoped package on NPM using the command npm publish --access public, I encountered the following error: ole@mki:~/cli$ npm publish --access public npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! F ...

javascriptnode.jsnpm