Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

In my pages, I have a menu where the landing page menu is initially highlighted. However, when I move to the next menu, the previous landing page highlight remains instead of being removed while swapping the menu. I am using Angular.js and angular ui-router for this functionality.

Below is the code snippet:

<li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
<li ng-class="{'active open': $state.includes('dashboard.setting')}"><a ui-sref="dashboard.setting.cat" >Settings</a></li>
 <li ng-class="{'active open': $state.includes('dashboard.users')}"><a ui-sref="dashboard.users.view" >User Info</a></li>

Here is my configuration file:

route.js:

var Admin=angular.module('connector',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap','ngFileUpload','angularUtils.directives.dirPagination','angularjs-dropdown-multiselect']);
Admin.run(function($rootScope, $state) {
      $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', { 
          url: '/',
          templateUrl: 'view/login.html',
              controller: 'loginController'
        })
        .state('dashboard', { 
        url: '/dashboard',
            templateUrl: 'view/dashboard.html',
            controller: 'dashboardController'
    })
    .state('dashboard.setting', { 
        url: '/setting',
        templateUrl: 'view/setting.html',
        controller: 'adminSettingController'
      })

    .state('dashboard.setting.cat', { 
        url: '/manage_category',
        templateUrl: 'view/manage_category.html',
        controller: 'adminCatCategoryController'
      })

    .state('dashboard.setting.subcat', {
        url: '/manage_subcategory',
        templateUrl: 'view/manage_subcategory.html',
        controller: 'adminSubcatCategoryController'
      })
});

Initially, the Home menu is highlighted. When clicking on the settings menu, the Home menu's highlight should be disabled. However, in my case, both menus remain highlighted after clicking on the second menu.

I want only the clicked menu to be highlighted and the landing page menu to stay highlighted initially. The same code works with angular-1.4.6 and angularuirouter-0.2.8, but I am currently using angular-1.5.9 and angularuirouter-0.3.2.

javascriptangularjsangular-ui-router

Answer №1

Here is an example of how you can accomplish this task:

JavaScript:

.service('dataService', function($http) {
  this.getData = function() {
    return $http.get('/api/data');
  };
});

HTML:

<button ng-click="getData()">Load Data</button>

Answer №2

It is typical for all parent states to be recognized as active when their child state is active. Thus, the dashboard state remains active if either dashboard.setting or dashboard.users are active. Consider exploring other approaches to highlight your menu items, as suggested by the_mishra.

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

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

Retrieve the parameter you are passing to PHP using AngularJS

I am struggling with the implementation of my editCategory() function in Angular. This function takes an id as a parameter, but I am unsure of how to properly retrieve this id in the PHP code and assign it to a variable. $scope.EditCategory = function(id) ...

phpangularjs

Parameterized Azure Cosmos DB Stored Procedure

I am currently learning about Azure Cosmos Db, and I am in the process of developing a simple JavaScript stored procedure that will return a document if a specific Id is provided. However, when I run the stored procedure, I do not receive a "no docs foun ...

javascriptazure-cosmosdb

Displaying tooltips dynamically for newly added elements all sharing a common class in React

I'm facing an issue with the primereact tooltip component from . Everything seems to be working fine except for the target property. When I have multiple elements on a page with the same class, the tooltip works as expected. However, when I add a new ...

javascriptreactjstooltipdynamically-generatedprimereact

The Java Servlet change did not trigger an update in the web content

While using Eclipse to develop a website where Servlet sends data to JSP, I encountered an issue. Despite modifying the data in the Servlet, it continued to send outdated information to the JSP page. I attempted the following options: Menu - Project - cle ...

javascriptjavaajaxeclipseservlets

alteration of textbox upon selection

I am currently working with the following code: $sql="SELECT * from customer_billing where sequence = '".$_GET["seq"]."' "; $rs=mysql_query($sql,$conn) or die(mysql_error()); $result=mysql_fetch_array($rs); ?> <script type= ...

phpjavascriptmysqlcomboboxtextbox

Retrieve the Vue.js JavaScript file from the designated static directory

This is my inaugural attempt at creating a web application, so I am venturing into Vue.js Javascript programming as a newcomer. I have chosen to work with the Beagle Bootstrap template. Within my Static folder, I have a file named app-charts-morris.js whi ...

javascripthtmlvue.jsdonut-chart

Put a spinner within a JavaScript function

Implementing a spinner using JavaScript function. Hello everyone, I am new to JavaScript and I am struggling to include a spinner in my code. Below is the code that I wrote. Can anyone help me identify what the issue might be? document.getElementById(&apo ...

javascriptjqueryajaxspinnersql-insert

Is it possible to utilize JStestDriver for testing JavaScript code embedded within JSP files?

Just a quick question: Is it feasible to conduct unit testing, specifically with JStestDriver, on Javascript code that is embedded within JSP files? Or do I need to extract it into separate external javascript files? ...

javascriptjspunit-testingjs-test-driverdata-integration

Can all actions in the ofType operator be waited for before calling next?

I have a list of dynamic redux actions that I need to monitor in order to trigger another action in my epic once all of them have been called. The key here is that the actions within this list can change and are not fixed. It would be ideal if the ofType o ...

javascriptreactjsreduxrxjsredux-observable

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap

The lifespan of my cookie is limited

I am utilizing the jQuery.min.js from https://github.com/carhartl/jquery-cookie and my cookie code looks like this: $(function() { //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //check ...

javascriptjqueryhtmlcookies

uib-datepicker-popup allowing for changing minimum mode dynamically

Is there a way to dynamically set the minMode of an Angular Bootstrap Datepicker? I managed to achieve this using the following code: <input type="text" ng-model="myDate" uib-datepicker-popup="{{datepickerFormat}}" datepicker-options="{& ...

javascriptangularjsdatepickerangular-ui-bootstrap

"Resetting count feature in AngularJS: A step-by-step guide

I have a list consisting of four items, each with its own counter. Whenever we click on an item, the count increases. I am looking to reset the counter value back to zero for all items except the one that was clicked. You can view the demonstration here. ...

javascriptangularjs

Ways to extract a number that comes after a specific word in a URL

I have a URL and need to extract a specific value from it by removing a certain step. I am looking for a regex solution to accomplish this task For example, if I have the window.location.href, the URL might look like this: https://mypage/route/step-1/mor ...

javascriptregex

What is the significance of providing a sole argument to the Object () function?

Answering a related question about object constructors, what is the intention behind passing an argument to the constructor of objects and using it in this specific manner? function makeFoo(a, b) { var foo = Object.create(Foo.prototype); var res ...

javascript

What are the challenges associated with using replaceChild?

function getLatestVideos(url) { var http = new XMLHttpRequest(); http.open("GET", url, false); // false for synchronous request http.send(null); return http.responseText; } var videosText = getLatestVideos("https://www.googleapis.com/youtube/v3/se ...

javascripthtmlbootstrap-5

"Developing a JSON object from a Form: A Step-by-

Currently utilizing the Drag n Drop FormBuilder for form creation. My objective is to generate a JSON representation of the form as shown below: { "action":"hello.html", "method":"get", "enctype":"multipart/form-data", "html":[ { ...

javascriptjqueryjsonforms

Prepending 'String:' to options in Angular

Angular code $scope.booleans = [ { "name" : "True", "value" : "true" }, { "name" : "False", "value" : "false", } ]; HTML <select ng-model="field.inser ...

angularjsangularjs-scope

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

I am utilizing the "extend" function from lodash to combine the objects in the arguments as follows: import { extend } from 'lodash'; const foo1 = { item: 1 }; const foo2 = { item: 1 }; const foo3 = { item: 1 }; const foo4 = { item: 1 }; const f ...

javascripttypescript