Here is my code
<ul kendo-menu k-orientation="horizontal" k-options="kendomenu">
<li ng-repeat="toplevel in UserMenu.TopLevels" class="k-item k-state-default" role="menuitem" >
<span class="k-link">
{{toplevel.name}}
<span class="k-icon k-i-arrow-s"></span>
</span>
<ul class="k-group k-menu-group k-popup k-reset" role="menu" ng-repeat="level2 in toplevel.levels" >
<li class="k-item k-state-default" ng-repeat="view in level2.views"><span class="k-link" ng-click="addTab(view.name,getTemplate(view.link))">{{view.name}}</span></li>
</ul>
</li>
</ul>
I want to open this LI on UL click
<li class="k-item k-state-default" ng-repeat="view in level2.views"><span class="k-link" ng-click="addTab(view.name,getTemplate(view.link))">{{view.name}}</span></li>
Kendo Menu has a property which you can set to open the menu on click instead of Hover.
In your Controller create a property as
$scope.kendoMenuOptions = {
openOnClick: true
};
and then in the HTML set the options as:
k-options="kendoMenuOptions"
Related
I need to disable element list inside a nav when certain parameter is equal to 'N', and enable it when it is equal to 'S'. This is my code
<div class="slidebar-nav">
<nav class="navbar navbar-default" role="navigation">
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li ng-disabled="trxAbil.I9WSFONI == 'N'"
ng-class="{'current' : itemSelected === 'Gestione fondi'}"
ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})"
ng-click="onMenuSelection('Gestione fondi')">
<a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a>
</li>
<li class="active"
ng-class="{'current' : itemSelected === 'Invio fondi'}"
ui-sref="home.pag2" ng-click="onMenuSelection('Invio fondi')">
<a><span class="glyphicon glyphicon-send"></span> Invio fondi</a>
</li>
<li class="active"
ng-class="{'current' : itemSelected === 'Sintesi fondi'}"
ui-sref="home.pag3" ng-click="onMenuSelection('Sintesi fondi')">
<a><span class="glyphicon glyphicon-send"></span> Sintesi fondi</a>
</li>
</ul>
</div>
</nav>
</div>
I try with ng-disabled="trxAbil.I9WSFONI == 'N'" but it doesn't work.
Any ideas? Thank you in advance
I assume that you're using Bootstrap in your UI (by watching navbar navbar-default classes).
You simply need to assign disabled class based on your conditions to disable an item in the menu. It will automatically prevent the click on that item.
<li ng-class="{'current' : itemSelected === 'Gestione fondi', 'disabled': trxAbil.I9WSFONI == 'N'}" ... > ... </li>
No need to assign ng-disabled to the li element.
If you want to show the item but make it not clickable and look disabled using CSS or your are using bootstrap then add 'disabled' : trxAbil.I9WSFONI == 'N' condition ng-class attribute in <li> tag:
CSS:
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}
HTML:
<li ng-class="{'disabled' : trxAbil.I9WSFONI == 'N', 'current' : itemSelected === 'Gestione fondi'}" ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})" ng-click="onMenuSelection('Gestione fondi')"><a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a></li>
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 build sidebar navigation menu from API JSON data.
But after bind data to sidebar navigation menu it will showing all menu with collapsed state after click on some option in sidebar navigation menu then it is working properly.
but at initial stage it is collapsed.
also when i click on some option in some menu of sidebar it is not in collapsed state that menu is closed state but if i click on option from same menu then it is collapsed state
<li ng-repeat="link in links" ui-sref-active="active" >
<i class="{{ link.ShortName }}"></i><span class="nav-label">{{ link.Name | translate }}</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li ng-repeat="subItem in link.ProgramList">
<a ui-sref="{{subItem.AccessibleName}}" ui-sref-opts="{reload: true}">{{ subItem.Name | translate }}
</a>
</li>
</ul>
</li>
this is API call
$http.get('http://localhost:53396/api/Module/Get').success(function (data) {
$scope.links = data;
});
For my angular application , i have created left nav menu. On click of link ,corresponding page is opening. My problem is I want to change active link color to blue whereas other links are in white color. When I click another link from menu ,that link should be in blue and remaining are in white.
I do not know how to do this in angular. With Jquery , its easy for me. But angular makes me nervous.
My left nav is
<div class="leftNavList">
<div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
<ul class="nav manageNav">
<li ng-click="isCollapsed2 = !isCollapsed2">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Usage</span>
</div>
</div>
</li>
<li ng-click="isCollapsed3 = !isCollapsed3">
<div class="listOuterWrapper">
<span class="mSans300">Payment</span>
</div>
<div class="listInnerWraper">
<div collapse="!isCollapsed3">
<ul class="paymentNav mSans30 font14">
<li>PaymentMethod</li>
<li>PaymentHistory</li>
</ul>
</div>
</div>
</li>
<li ng-click="isCollapsed4 = !isCollapsed4">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Account</span>
</div>
</div>
</li>
</ul>
</div>
Step 1: In ng-init declare a variable.
ng-init="activelink=0"
Step 2: Now in ng-cick of link change the value of activelink.
<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>
Step 3: Declare a class linkcolor that defines the color of the active link.
Step 4: Now use ng-class="{ 'linkcolor' : activelink==1 }" expression for both the link.
Step 5: The links will change to
<li><a href="" ng-click="activelink=1" ng-class="{ 'linkcolor' : activelink==1 }" </a></li>
<li><a href="" ng-click="activelink=2" ng-class="{ 'linkcolor' : activelink==2 }"</a></li>
The expression activelink==1 will return true or false depending on the value of activelink.
I would recommend looking into ui-router , it has active states (these are the pages of your app) which do all these css and state changing from the view rather than having the logic in your controller and there are many powerful tools to make your app function better in less code..
In your nav:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.
Here is my current code.
What I am trying to do is to: generate different content after click each dropdown toggle.
For example, when text is clicked, "Text" shows under the button.
Could someone help me on that?
Thanks in advance!
You have to remove the ng-model from the li element & add a ng-click handler to your a tag. This way you can use the choice that you selected for whatever you want to do with it.
Example: http://plnkr.co/edit/oTHWf2I266SHjur5Ebv8?p=preview
HTML:
<!-- ADD ITEM BUTTON -->
<li class="dropdown">
<button class="btn btn-default dropdown-toggle">Add item</button>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a ng-click="selectItem(choice)">{{choice.type}}</a>
</li>
</ul>
</li>
{{selection}}
JS:
$scope.selection = {};
$scope.selectItem = function(choice) {
$scope.selection = choice;
}