Consider the following:
<ul>
<li id="dashboard" data-ui-sref-active="selected">
<a data-ui-sref="home">Dashboard</a>
</li>
<li id="jobs" data-ui-sref-active="selected">
<a data-ui-sref="home.foo">Foos</a>
<ul>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo1">Foo 1 list</a>
</li>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo2">Foo 2 list</a>
</li>
</ul>
</li>
</ul>
Problem is if the user currently click on another link, this "Dashboard" link state is still active.
How can I toggle the state active/inactive for Dashboard when user clicks it or clicks another link
Update:
I have tried this ui-sref-active-eq and it does work, however I cannot set this state back to active
That is because you are at child state of your home state, and thus it will always be active.
Use ui-sref-active-eq instead
According to the docs:
Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
Edit: Added in Plnkr for reference.
Related
I'm using React version 16.6.3. I need some help to implement active menu item in sidebar. I need to do this thing: when the user clicks on any <li> in sidebar, the <li> must become active (for example, it gets class "active").
If the <li> is active and have treeview class, then, inside it, set to <ul> class "show" (if any)
Here's the code:
import React , { Component } from "react"
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = { 'activeItem': 0 }
}
render() {
return (
<div className="main-sidebar">
<section className="sidebar">
<ul className="sidebar-menu tree">
<li className="nav-divider"></li>
<li className="header">PERSONAL</li>
<li>
<a href="#">
<span>Dashboard</span>
</a>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
<ul class="treeview-menu">
<li>Chat app</li>
<li>Project</li>
<li>Contact / Employee</li>
</ul>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
</li>
</ul>
</section>
</div>
)
}
}
The first question you should ask yourself is (if not always) how you store the data of the user selection. You might have multiple activeItem because this is a tree, ex. multiple branches can be open or close at the same time. You need to look for a data structure to hold that thinking first.
Here's a simple one, give each item an id/key, <li key="1-0-0"> and then you can track onChange event of this li and then inside onChange you can use a flat array structure to store the current state of this simple tree. For example, {'1-0-0': true }
There're lots of different ways to do data part, the above one is a simple idea to get you started. And after that, based on the captured data, you can then update the children attribute of each node, ex. <li className={ getNodeAttr('1-0-0')> assuming getNodeAttr is a utility function that give you back the class name string given the node name.
You should not bind active state on a navigation sidebar because if a user type a route directly in a browser the menu item won't be highlighted.
Instead, try to bind the active state to the route with NavLink (if you use react-router):
ref: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
I am new in angular and I have been using angular-sidebarjs in my app. I have given my code of sidebar directive below.
in my template:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
radius.name
</li>
</ul>
</nav>
</sidebarjs>
in my home.js:
var home = angular.module('wm.home',[uiRouter,'ngSidebarJS'])
When I click on an option among the list, sidebar doesn't close and the required page loads behind. sidebar closes only when I click on the toggle button or outside the sidebar.
How to close the sidebar onclick of any of the options in the list?
You should add the attribute sidebarjs-toggle to your options, like this:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
<a sidebarjs-toggle href="#" ng-click="listMenus()" ui-sref="users({radius_id: radius_id})" ui-sref-opts="{reload: true}">radius.name</a>
</li>
</ul>
</nav>
</sidebarjs>
Also, I think you should remove that href="#" because you are already doing the routing with the ui-sref.
I want to add isActive class to an item menu when user click on this item, and remove isActive class from all others items.
I am trying to compare the id, this is the angularJS code:
$rootScope.isActive = function(idVal, event){
return idVal === event.target.id;
}
This is a part from Menu Html code:
<ul class="sidebar-nav">
<li>
<a ui-sref="" id='101' ng-class="{active: isActive($event, 101)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Rules
</a>
<ul class='dropdown sidebar-nav-dropdown' >
<li>
Transaction Mapping
</li>
<li>
File Setup
</li>
<li>
Code Setup
</li>
</ul>
</li>
<li>
<a href="#" id='102' ng-class="{active: isActive($event, 102)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Administrative Rules
</a>
<ul class='dropdown sidebar-nav-dropdown'>
<li>
<a ui-sref="admin.mapping-rules">Transaction Mapping</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">File Setup</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">Code Setup</a>
</li>
</ul>
</li>
</ul>
Thanks,
First of all, you shouldn't use the root scope. You should use the scope of the controller associated to that view.
Second, your code doesn't make much sense. $event can be used as a parameter of a function called... to react to an event:
ng-click="doSomething($event)"
But with ng-class, there is no $event.
All you need to have in your scope is the ID (or name, or whatever identifies a menu item) of the selected menu item:
$scope.selectedMenuItem = null;
When an item is clicked, you need to change the selected menu item:
ng-click="selectMenuItem(101)"
$scope.selectMenuItem(item) {
$scope.selectedMenuItem = item;
}
Then to associated a css class with the selected menu item, you simply need
ng-class="{active: selectedMenuItem === 101}"
That said, if all your links navigate to a given router state, you don't even need that selectedMenuItem. All you need is to add the active class if the current router state is the one the that the link allows navigating to (assuming $state is on your scope):
ng-class="{active: $state.includes('admin.mapping-rules')}
I have a navigation bar in which first option is of the parent state and other opitions are for child states.I have used ui-sref-active to highlight which state is active. Now when I switch from one state to another the parent state is always highlighted along with the child state.
Any suggestions how to solve this?
<li ui-sref-active="nav-session-page">
<a ui-sref="dashboard">... </a>
</li>
<li ui-sref-active="nav-candidate-page">
<a ui-sref="dashboard.candidate" >..</a>
</li>
<li ui-sref-active="nav-interviewer-page">
<a ui-sref="dashboard.interviewer">..</a>
</li>
Now I have solved this problem, I have used ui-sref-active-eq for this purpose.What it does is that only the state which is active is highlighted and all other states remain the same event the parent state also.
I've got a Bootstrap navbar dropdown menu, where clicking the parent link produces the dropdown list (default behaviour). The dropdown list of the parent is built using ngRepeat from an array of navigation data, and each has a ui-router state parameter, so it looks like:
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">
Parent Link
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in navCtrl.items()"
ui-sref-active="active">
<a ui-sref="some.state({ paramKey: paramValue })">
{{item.link}}
</a>
</li>
</ul>
</li>
But, even though it does seem to drop the active class on my link it throws this error in the console:
TypeError: Cannot read property 'name' of undefined
I am not entirely sure about the answer, but, as far as I know, why would you use navCtrl.items() using brackets? I have never seen it used like that before. Wouldn't the old item in items ng-repeat work? Sorry if it does not help at all.