I am using below code
<li class="dropdown" ui-sref-active="activeclassroot">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li ui-sref-active="activeclasschild"><a ui-sref="products1" >products1</a></li>
<li ui-sref-active="activeclasschild"><a ui-sref="products2" >products2</a></li>
</ul>
</li>
Here activeclasschild class is getting applied successfully. Is there any way to apply activeclassroot class to the root li if any of the child links are active?
Related
I want to call controller method by using #Url.Action in href,
how can we do the same?
<ul id="dvMenuInner" class="nav navbar-nav dropdown">
<li ng-repeat="parent in menu">
<a href="#")}" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true">
</span>{{parent.menuname}}
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" ng-repeat="child in parent.children">
{{child.menuname}}
<ul class="dropdown-menu">
<li ng-repeat="children in child.childrencc"><a ng-repeat="child in parent.children" href="#Url.Action({{children.actionname}},{{children.url}})">{{children.menuname}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Since URL.Action is Razor code and it will execute at server so you can not pass your client side data to it.
either you can do it as follows
<a href="#Url.Content("{{parent.menuname}}"+"/"+"{{parent.actionname}}")">
which will construct the URL controller and action name or you can do it via plain Html way
<a href="{{parent.menuname}}/{{parent.actionname}}">
by any of the above way you can redirect your link to the desired controller+action
I need to open the dropdown when clicking on link with angularjs. my idea is to add the class open to the dropdown with ng-class directive but this is not working .
I have two dropdown menu, what i need is to open the second one when clicking on the link within the first one
<ul class="nav navbar-nav navbar-right " >
<li class="dropdown" ng-class="myDropdown ? : 'open'">
<a class="dropdown-toggle" data-toggle="dropdown" >Menu</a>
<ul class="dropdown-menu " role="menu" ng-if="!myDropdown">
<li>
Open second dropdown
</li>
</ul>
<ul class="dropdown-menu " role="menu" ng-if="myDropdown">
<li >
Go back
</li>
</ul>
</li>
</ul>
Typescript
toogleDropDown() {
this.scope.myDropdown = true;
}
This won't work since you toggleDropDown is a function and it does not return anything !undefined should be true I think so your line:
Go back
is same as writing:
Go back
overall there's no need for that function at all what you need is something like this:
<a href="" ng-click="myDropdown=!myDropdown">
<span ng-if="!myDropdown">Open second dropdown</span>
<span ng-if="myDropdown">Go back</span>
</a>
and remove that function from your controller there's no need for it.
also I believe you wanted to set up ng-class like this:
<li class="dropdown" ng-class="{'open': myDropdown}">
Here's fiddle: https://jsfiddle.net/pegla/nq11093m/1/
I want to:
Have a list which gets an active class when the user clicks on them using ng-repeat
I have done some coding:
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits">{{kit.name}}</li>
</ul>
and the controller:
$meteor.subscribe('kits').then(function (){
$scope.kits = $meteor.collection(Kits, false);
});
This returns a list of kits from the mongo database collection.
What's the best way to do this?
Thanks!
edit
I added the following code:
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}"><a ng-click="selectedItem = kit.name" href="">{{kit.name}}</a></li>
</ul>
But the active class is not being removed when I click another li
edit2
here's the code to have the first one active but still having issues with them not removing the active class when I click on a different one that doesn't have the active class.
<ul class="nav nav-pills center-pills" ng-init="activeIndex = 0">
<li ng-repeat="kit in kits" ng-class="{active:(activeIndex==$index)}"><a ng-click="activeIndex = $index" href="">{{kit.name}}</a></li>
</ul>
edit3
Here's the code I have now (still same result):
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}" ng-init="selectedItem = kits[0].name"><a ng-click="selectedItem = kit.name" href="">{{kit.name}}</a></li>
You want only one active element at the same type or add class on each LI user will click?
with only one element selected at the time
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': selectedItem == kit.name}">
{{kit.name}}
</li>
</ul>
with multiple selections
<ul class="nav nav-pills center-pills">
<li ng-repeat="kit in kits" ng-class="{'active': kit.active}">
{{kit.name}}
</li>
</ul>
Now I want to toggle class with ng-class, but now I am stuck with tab which has sub <a>. Here is Html
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active:isActive('/home')}"><a ui-sref='home'>Home</a>
</li>
<li ng-class="{active:isActive('/ebin'||'/reports')}" class="dropdown">Expenses<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref='ebin'>My Expenses</a>
</li>
<li><a ui-sref='reports'>Expense Reports</a>
</li>
</ul>
</li>
<li ng-class="{active:isActive('/settings')}"><a ui-sref='settings' translate="SETTINGS">Settings</a>
</li>
</ul>
JS part:
$scope.isActive = function(route) {
return route === $location.path();
}
The issue I have here is the ng-class only work for /home and /setting, but doesn't work for dropdown menu. any Idea?
The issue is with the parameter you are passing "isActive('/ebin'||'/reports')". This is not a valid string.
What you could do is this:
ng-class="{'active':isActive('/ebin'), 'active':isActive('/reports')}"
<ul class="nav navbar-nav friend-label">
<li class="dropdown" ng-repeat="module in modules">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
{{module.ModuleName}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="subModule in module.SubModules">
<a href=""><b>{{subModule.SubModuleName}} </b>
</a>
</li>
</ul>
</li>
</ul>
By which, I'm getting following out put.
Question and problem is, when I do have submenu its fine if dropdown appears,
but when there is no submenu, dropdown should not come. still it shows dropdown small pointer arrow. and if you click it, it comes out with blank dropdown.
As shown in this fig, Contact Us menu doesn't have submenu. Still blank dropdown comes. I want to stop it using above code of HTML. Its a small problem. but I'm unable to fig it out.
Using ngRepeat you can dynamically populated menu from the model:
<span class="dropdown" dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" dropdown-toggle>
Click me!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a ng-click="runFn(choice.fn)">{{choice.name}}</a>
</li>
</ul>
</span>
Look for fully worked example on Plunker
I am inferring that you are populating your dropdown items dynamically via ajax or server-side.
If that is true, then you could make use of small CSS/Javascript to hide empty menus. But, you have to take care of a few quirks.
First make sure that your markup looks like this:
<li class="dropdown">
Contact Us <span class="caret"></span>
<ul class="dropdown-menu" role="menu"></ul>
</li>
Important: Notice, that there is no white space between your ul.dropdown-menu start and end tags. This is because, the CSS :empty selector will fail if there is a white-space or line-break.
Now, if there are menu-items in your database you could populate those inside the ul.dropdown-menu as li. If there are no items, then it will left empty. At this point you will have a small dropdown which is empty and still a caret showing.
A little CSS can make the empty dropdown go away:
ul.dropdown-menu:empty {
display: none;
}
But, because CSS does not have reverse adjacent sibling combinator, we cannot target the caret. So, we have to resort to a little Javascript/jQuery:
$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();
You can choose to have both implemented only in jQuery if you wish to. This is just to give you an idea.
Put together your setup now looks and behaves something like this snippet below. Please view it in full-screen to prevent collapsing.
Snippet:
$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();
ul.dropdown-menu:empty {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Contact Us <span class="caret"></span>
<ul class="dropdown-menu" role="menu"></ul>
</li>
</ul>
</nav>