0

为什么我的可排序角度 ng-repeat 菜单会删除排序菜单项之后的所有内容？ https://github.com/RubaXa/Sortable/tree/dev 我正在使用带有 Angular 的 RubaXa 的 Sortable 库来为自定义 CMS 制作可排序的菜单系统。当菜单被排序时，我有一个遍历所有菜单项的代码循环，记录它们的位置并更新 $scope.menus。

            var menus = {};
            jQuery('.mb-draggable').has('a[href!="#"]').each(function(i, menuItem) {
                var location = jQuery(menuItem).parent('[data-menu]').data('menu');
                var position = jQuery('[data-menu="' + location + '"]').children('.mb-draggable').has('a[href!="#"]').index(jQuery(menuItem));  
                var id = jQuery(menuItem).data('id');

                //findMenuById finds the index and data of the menu item that has a matching id
                var found = theme.findMenuById($scope.menus, id);
                var newData = found.data;
                newData.location = location;
                newData.position = position;
                if(!menus[location]) {
                    menus[location] = [];
                }
                menus[location][position] = newData;
            });
            $scope.menus = menus;
            console.log('$scope.menus', $scope.menus);
            $scope.$apply();

$scope.menus 有两个不同的属性 .main 和 .footer，每个属性都包含一个菜单列表项数组。当我制作 $scope.menus = menus 时，$scope.menus 是正确的，但是视图突然摆脱了页脚菜单和编辑按钮，它们不在 ng-repeat 中。这是菜单的玉石。

#navbar.navbar-collapse.collapse
        ul#sortable-head.nav.navbar-nav(data-menu="main")
            li(ng-repeat="menu in menus.main" class="mb-draggable {{menu.classes}}" ng-class="active(menu.url)" data-id="{{menu.id}}")
                a(href="{{menu.url ? menu.url : /}}" target="{{menu.target}}").mb-editable.mb-main-list-a {{menu.title}}
            li.drop-down
                a(data-toggle="dropdown" href="#").dropdown-toggle 
                    | Blog
                    span.caret
                ul#sortable-footer.dropdown-menu(role="menu" data-menu="footer")
                    li(ng-repeat="menu in menus.footer" data-id="{{menu.id}}").mb-draggable
                        a(href="{{menu.url ? menu.url: /}}" target="{{menu.target}}").mb-editable.mb-footer-list-a {{menu.title}}

使用 jQuery 添加编辑按钮

jQuery('[data-menu]').append($compile('<li data-toggle="modal" data-target="#editMenuItemModal" ng-click="selectedMenu($event)" class="mb-edit-menu-item"><a href="#"> <i class="fa fa-pencil fa-lg"></i></a></li>')($scope));
4

1 回答 1

0

使用ng-sortable.js

文档：https ://github.com/RubaXa/Sortable/tree/dev#support-angularjs

PS 如果不清楚，请在 jsbin.com 上创建一个示例，我会尽力帮助您。

于 2014-12-09T09:05:30.497 回答