Question

我的角度模板中的重复重复需要可以排序。我使用jQuery-ui的Sortable来实现它。

JS：

$scope.data = [{"key":123,"val":"a"},
{"key":124,"val":"b"},
{"key":125,"val":"c"}];

$(".sortable").sortable();

模板：

<div class="sortable"> 
    <div ng-repeat="sub in data" >
        {{sub.key}}
    </div>
</div>

这完全正常，我可以拖放元素。但是，当ng-repeat嵌套在另一个中时，它不起作用;我无法拖动任何东西。在使用Chrome检查器时，我发现该类可以排序＆＃39; ui-sortable＆＃39;根本没有添加到任何元素。

JS：

$scope.subJson = [{"name":"MS1","slides":[{"title":"Title1"},{"title":"Title2"}]},{"name":"MS2","slides":[{"title":"Title3"},{"title":"Title4"}]}];

$(".sortable").sortable();

模板：

<div> 
    <div ng-repeat="sub in subJson" >
        {{sub.name}}
        <div class="sortable">
            <div ng-repeat="slide in sub.slides" >
                {{slide.title}}
            </div>
        </div>
    </div>
</div>

为什么会这样？有解决方案吗？

Answer 1

也许这个问题在于$('.sortable').sortable()的执行时间。在设置控制器后，Sortable会立即找到类名为sortable的元素。

那时ng-repeat尚未启动，因此$('.sortable')找不到元素。在下面的js小提琴中，控制台中的输出显示了这个问题。 http://jsfiddle.net/Q5FWt/439/

快速脏修补程序$('.sortable').sortable()放在setTimeout中。但是，操纵dom元素绝不是一个有角度的方式！实现这一目标的理想方法是构造一个指令，或使用像这样的angular-ui插件，https://github.com/angular-ui/ui-sortable

Answer 2

Sortable需要重新加载要控制的对象。

放$(".sortable").sortable();在函数内部，然后在列表的项目行中调用该函数。

例如：

function init() {
    $(".sortable").sortable();
}

然后在你的HTML中：

<div> 
<div ng-repeat="sub in subJson" >
    {{sub.name}}
    <div class="sortable">
        <div ng-repeat="slide in sub.slides" >
            <div class="layer-draggable" 
              ng-mousedown="init()">
                {{slide.title}}
          </div>
        </div>
    </div>
</div>

ng-repeat和jquery ui可排序

2 个答案: