Question

我使用角度ul-li制作ng-repeat列表。但是在DOMReady上，我想要生成该列表的总长度，并且我希望在li上运行一个事件＆＃34; hover＆＃34;或者＆＃34;点击＆＃34;。但是我获得的长度为0并且没有事件发生。什么是最好的方法来获得它？提前谢谢！

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

我需要在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');
               });

你看，我不能使用角度

Answer 1

jQuery在angular之前加载，所以你需要延迟来获取jQuery的长度，即setInterval ..

或者你可以通过以下问题的答案帮助角度本身：

Calling a function when ng-repeat has finished

如果你需要在重复完成后执行一些代码，并使用length属性从GroupList对象本身获取长度。

您还可以使用有角度的ng-mouseover和ng-mouseleave事件将hover绑定到控制器中的函数

<li ng-class="{'active':$index==0}" data-ng-repeat="cg in GroupList" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">

此外，angular还有jqLite，这是一个微小的，API兼容的jQuery子集，允许Angular以跨浏览器兼容的方式操作DOM。因此，您可以从事件处理中的类似jQuery行为中受益。

Answer 2

  <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...
    });

谢谢！

使用jquery

2 个答案: