<ul class="dropdown-menu" ng-repeat="_Routevalue in _ViewItems">
<!--<li><a>Hello</a></li>-->
<!--<li><a>Hello</a></li>-->
<li>{{_Routevalue.productName}}</li>
</ul>
Here's the hardcoded values displayed properly, but when I use the ng-repeat it's only showing the last one.
You should add ng-repeat to the <li>, not to the <ul>
<ul class="dropdown-menu">
<li ng-repeat="_Routevalue in _ViewItems">{{_Routevalue.productName}}</li>
</ul>
Related
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/
<ul>
<li ng-click="setSelectedItem(member.id)">test
<ul>
<li ng-click="setSelectedItem(member.id)">test 2
<ul>
<li ng-click="setSelectedItem(member.id)">inner test2
</li>
</ul>
</li>
</ul>
</li>
</ul>
The above tree structure is generated by two directives by using this stack overflow question.
When test is clicked setSelectedItem() gets called once. When test2 is clicked setSelectedItem() gets called twice. When inner test2 is clicked setSelectedItem() gets called thrice.
Can anyone help me solve this. I want the click to be called only once when clicking the inner li tags. Thanks
To stop event propogation, use below code.
<li ng-click="setSelectedItem(member.id); $event.stopPropagation();">test</li>
Use $event.stopPropagation();. To prevent bubling of click event to the parents.
<ul>
<li ng-click="setSelectedItem(member.id);$event.stopPropagation();">test
<ul>
<li ng-click="setSelectedItem(member.id);$event.stopPropagation();">test 2
<ul>
<li ng-click="setSelectedItem(member.id);$event.stopPropagation();">inner test2
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need to add a class to the last <li> in an <li>group created using Angular's ngRepeat. So the code below
<ul>
<li class="columns small-3" ng-repeat="tag in tags">
{{tag}}
</li>
<ul>
creates something like
<ul>
<li>Art</li>
<li>Science</li>
<li>Beauty</li>
<ul>
What I need is for the class .end to be added to the last <li> so the end result would be
<ul>
<li>Art</li>
<li>Science</li>
<li class="end">Beauty</li>
<ul>
How is this possible?
You should be able to do this using a combination of ng-class and $last.
<ul>
<li class="columns small-3" ng-class="{'end':$last}" ng-repeat="tag in tags">
{{tag}}
</li>
<ul>
Try with ng class with a condition on the index
<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>
I'm building a twitter bootstrap list using angular's ng-repeat:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat="option in options">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.label}}
</a>
</li>
</ul>
Now, I want to include a divider (<li class="divider"></li>) inside this list. It should be before the last element in the list (which is also indicated by option.value with a negative value, which is probably an easier indication).
My problem is that since the ng-repeat iteration is on the li element itself, I couldn't find a way to use ng-if on this element.
Try ng-repeat-start and ng-repeat-end:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat-start="option in options" ng-if="option.value>0">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.value}}
</a>
</li>
<li class="divider" ng-repeat-end ng-if="option.value<0">
option < 0 ({{option.value}})
</li>
</ul>
DEMO