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

Question

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

I´d recommend to use the `ng-mouseover` and `ng-click` attributes in your templates
You don't have to use jquery just for events binding,same thing is possible with angular itself ,refer @schlangguru's comment — dreamweiver, Sep 29 '15 at 13:51

score 0 · Accepted Answer · edited May 23 '17 at 12:06

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.

score 0 · Answer 2 · answered Sep 29 '15 at 14:04

  <li ng-class="{'active':$index==0}" data-ng-repeat="cg in GroupList"  on-finish-render="ngRepeatFinished">

</li>    
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
   //do stuff, execute functions -- whatever...
    });

Thanks !!

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

2 Answers2