jqueryangularjshoverangularjs-ng-repeatdomready

get length of angular js ng-repeat li listing items with jquery


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


Solution

  • 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.