<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>
Related
<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>
I only want to catch the first list item with a css selector.
That can i do?
<ul>
<li class="someclass"> </li>
<li id="thisId" class="someclass"> </li>
<li id="thatId" class="someclass"> </li>
<li id="someId" class="someclass"> </li>
<ul>
ul li.someclass:first-child{
}
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
How can one, if at all possible, do the following:
<ul>
<li ng-reapeat="a in c"></li>
</ul>
with an output like this:
<ul>
<div>
<li></li> <--- from a to b (say first till 3rd element)
<li></li>
...
</div>
<div>
<li></li> <--- from b to c (4th element till end)
<li></li>
...
</div>
</ul>
Or even multiple <ul></ul> blocks. First one closing at a designated index, second one opening and continuing until the end.
What about slicing the array (probably not an "angular way"), for example
<ul>
<div>
<li ng-repeat="a in c.slice(0, 3)"></li>
</div>
<div>
<li ng-repeat="a in c.slice(3)"></li>
</div>
</ul>
General idea, you should be able to get what you want using this pattern
<ul>
<li ng-repeat-start="a in c" ng-show="$index<3"></li>
<li ng-repeat-end ng-show="$index>=3"></li>
</ul>
Try this:
I think you need multiple ul blocks.
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index<3"></li>
</div>
</ul>
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index>2"></li>
</div>
</ul>
Hope it helps...!
I am new to Drupal and I would like to customize the output of the main menu. Can anyone point me in the right direction to accomplish this? The ideal scenario is a pre-packaged module that retrieves the data from the database and allows me to output it as I want. Alternatively, I can code if necessary.
The default menu output is this:
<h2>Main menu</h2>
<ul id="main-menu" class="links inline clearfix">
<li class="menu-449 first">Section 1</li>
<li class="menu-452">Section 2</li>
<li class="menu-453">Section 3</li>
<li class="menu-451">Section 4</li>
<li class="menu-454">Section 5</li>
</ul>
The output that I need is:
<ul id="menu" class="menu">
<li><span>Section 1</span>
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
<ul>
<li>Section 1.3.1</li>
<li>Section 1.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Check out the dhtml_menu module, depending on your layout you may need to do some custom javascripting, but it will do what you're looking for