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>
Related
hello i am working on a navigation direction.
if there are any child entries i have to add a attribute "uib-dropdown"
<li ng-attr-uib-dropdown="{{!!tree[$index].children ? '' : undefined }}" ng-repeat="nav in tree" ng-class="{ 'active' : isActive(nav.path) }">
the variable "!!tree[$index].children" would return true or false.
i am behind google now since 2hours but i cannot see how to use this expression with ng-attr the right way.
because now its adding the uib-dropdown to every li. doesn´t matter if it is true or false.
i hope someone can help me.
thanks
Because our answer for tree[$index].children can be truthy, if tree[$index].children has an answer, it will be true, if it's empty or undefined, then it will be false/falsey. There is no need for the !! or the ternary operator.
<li ng-attr-uib-dropdown="{{tree[$index].children}}">
You could also use the || (or operator) to better illustrate "falsey" of undefined.
<li ng-attr-uib-dropdown="{{tree[$index].children || undefined}}">
Created a plunkit. Here I used ng-if where if the array "food" exist, then allow the dropdown. If you remove the "food" array, the link is replaced without the dropdown.
<a href ng-if="!food">
Click me, no dropdown, yo!
</a>
<!-- Simple dropdown -->
<span ng-if="food" uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
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"
My layout page looks like this:
<li class="dropdown">
<ul class="submenu">
<li>#Translate("MY_ACCOUNT")</li>
</ul>
</li>
In layout page i have : #RenderBody()where i have Index page.In index page im using <div ng-view></div>. What im trying to do is when user click on a href to redirect him on that page and set class to this menu that is render in ng-view:
<div class="account-item">
<div class="account-heading" ng-class="{active : activeMenu === 'Settings'}">
<h4 class=" account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#settings" ng-click="activeMenu='Settings'">5. #Translate("SETTINGS")</a></h4>
</div>
<div id="settings" class="account-collapse collapse in">
<div class="account-body">
#Translate("PERSONAL_INFORMATION")
#Translate("NOTIFICATIONS")
#Translate("CHANGE_PASSWORD")
#Translate("GAME_SETTINGS")
</div>
</div>
</div>
When i try this nothing happens:
$scope.SetActiveMenuForPersonalInfo = function () {
$scope.activeMenu = 'Settings';
$scope.activeLink = "PersonalInfo";
}
$scope.activeMenu and $scope.activeLink are visible only in function and thats why i cant set class on menu. When i put it out of function it works
Try changing the tripple equality sign in ng-class="{'active-link' : activeLink==='PersonalInfo'}" to double ==
PS: I do not understand the last paragraph
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.
Today I faced a strange problem for me in AngularJS.
In this example I have two ng-repeat in product (two or three images and the same number of colors) and one ng-repeat for pagination (irrelevant in this case I assume).
HTML:
<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
<div class="item">
<!-- Item image -->
<div class="item-image">
<ul>
<li ng-repeat="desc in item._source.description" ng-show="$first">
<img class="preview" ng-src="server/{{desc.smallImage.url}}">
</li>
</ul>
</div>
<!-- Item details -->
<div class="item-details">
<div class="product-colors">
<ul class="btn-group pull-right">
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
</li>
</ul>
</div>
</div>
</div>
All I wanted to do is that click on one of colors (img.color) changes corresponding img.preview visibility. In my attempts I was always able to changed every img.preview in whole list, not the one I clicked on.
MY ATTEMPTS:
HTML
<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">
JS (controller)
$scope.changeColor = function(idx) {
$scope.selectedColor = idx || 0; //default show always first img.preview from list
};
MY ATTEMPTS #2 (working)
HTML
<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">
JS (controller)
$scope.changeColor = function(idx, key) {
$scope.__selected = key;
$scope.__num = idx;
};
This might be quite simple:
Considering desc and color will be referring to same object as they are of the same source.
So, desc and color should be identical and setting a property on either of them supposed to reflect on the other.
Make the changes as follow and try, havent tested though:
<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">
and
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>