使用角度添加滑动效果到bootstrap下拉列表

Question

I am using Bootstrap 3 and trying to use show/hide.bs.dropdown to animate the dropdown menu. It's working but I can only get it to work for the first menu item. I don't know how to pass the $index from angular into the function. Is there anything in the event that is passed in that I can use to index through the items or can I solve this using angular? I just want to use the slideDown and slideUp animations.

Here is my Javascript

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function (event) {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function () {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

This is an example of how the first element does it's animation when I click on the last.

Here is my HTML/angular

<ul class="nav navbar-nav dropdown">
        <li ng-repeat="xmenu in $ctrl.xactMenus.menuList">
            <a class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{xmenu.menuName}} <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li ng-repeat="menuItem in xmenu.menuItems">
                    <a href="{{menuItem.path}}">{{menuItem.name}}</a>
                </li>
            </ul>
        </li>
    </ul>

Let me know if there is anything else I can add to help answer this question! Thanks!

Answer 1

Can you show your angular test function? Sorry I dont have commenting facility. Please dont down vote.. :(