I am making ul-li
list using angular ng-repeat
. But on DOMReady
i want total length of that list that has been generated and i want to run an event on that li
on "hover" or "click".
But the length iam getting is 0 and no event is firing. What can be the best method to get that?
Thanks in advance!
<ul class="megamenuUL">
<li ng-class="{'active':$index==0}" data-ng-repeat="cg in GroupList">
</li>
</ul>
<script>
$(document).ready(function () {
console.log($("ul.megamenuUL > li").length);
});
</script >
events that i need to fire on hover of that li
$("#divOffers ul.megamenuUL > li > a").hover(function () {
$("#divOffers .megamenuUL > li").removeClass('active');
$(this).parent().find("#divOffers ul.megasubmenu li").removeClass('active');
$(this).parent().find("#divOffers ul.megasubmenu li:eq(0)").addClass('active');
$(this).parent().addClass('active');
});
U see , i cant use angular for this
jQuery loads before angular, so you will need a delay to obtain the length with jQuery, i.e setInterval
..
Or you can do this with angular itself with the help of the answer of the following question :
Calling a function when ng-repeat has finished
if you need to execute some code after the repeat finishes and obtain the length from the GroupList object itself using length
property.
You can also use angular ng-mouseover
and ng-mouseleave
events to bind hover to functions from controller
<li ng-class="{'active':$index==0}" data-ng-repeat="cg in GroupList" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
Also angular has jqLite which is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. So you can benefit from a similar jQuery behavior within you event handling.