1

我正在尝试将一些数据显示为 ng-repeat 中的小部件，但 angular 的行为很奇怪。我似乎不明白是什么原因造成的。我试图放置 ng-repeat 的 HTML 就是这个。

<div class="span3 widget-container-span">
                                <div class="widget-box">

                                    <div class="widget-header widget-header-small header-color-dark">
                                        <h6 class="smaller">{{ me.head }}</h6>

                                        <div class="widget-toolbar no-border">
                                            <label>
                                                <input type="checkbox" class="ace ace-switch ace-switch-3" />
                                                <span class="lbl"></span>
                                            </label>
                                        </div>

                                        <div class="widget-toolbar">
                                            <span class="label label-warning">
                                                1.2%
                                                <i class="icon-arrow-down"></i>
                                            </span>
                                            <span class="badge badge-info">{{ me.label }}</span>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <div class="alert alert-info">
                                                {{ me.desc }}
                                            </div>
                                        </div>
                                    </div>

                                </div> <!-- end widget box-->
                            </div><!-- end span3 widget container-->

如果我将 ng-repeat 放在第一个 div (span3 widget-container-span) 上，则小部件拖动不起作用。小部件容器拖动不工作

如果我将 ng-repeat 放在第二个 div 中（div class = "widget box"），拖放功能有效，但盒子垂直堆叠而不是水平堆叠，并且它们之间的间距不计在内。它就像一个列拖放。小部件容器拖动工作但仅垂直

我的猜测 - 使用 angular ng-repeat 时容器 div 停止工作。

请指导我所缺少的。

PS我正在使用部分。

4

1 回答 1

0

我使用了一个指令来避免 jquery 与 angular 的可排序冲突

myScrum.directive("ngSortable", function(){
return {
    link: function(scope, linkElement, attrs){                  
        linkElement.sortable({
            placeholder: "placeholder",
            opacity: 0.8,
            axis: "x,y",
            update: function(event, ui) {
                // get model
                var model = scope.$eval(attrs.ngSortable);

               // loop through items in new order
                linkElement.children().each(function(index) {
                    var item = $(this);

                    // get old item index
                    var oldIndex = parseInt(item.attr("ng-sortable-index"), 10);

                    model[oldIndex].seq = index;
                });
                // notify angular of the change
                scope.$apply();
            }
        });
    }
};
});

并在 div 中使用以下

<div class="widget-box" ng-sortable-index="{{$index}}" ng-repeat="item in sid">
于 2013-10-20T12:22:01.917 回答