ng-repeat和jquery ui可排序

我在我的角模板中需要排序的ng重複。我使用jQuery-ui的Sortable來實現它。ng-repeat和jquery ui可排序

的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檢查器時，我發現類「ui-sortable」根本沒有添加到任何元素。

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

爲什麼會出現這種情況？有解決方案嗎？

來源

2014-03-26 codewarrior

也許這個問題在於執行時間爲$('.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

來源

2014-03-26 02:07:43

從來沒有在這樣想過。謝謝！雖然沒有設置Timeout需要一個毫秒數值的時間？ – codewarrior

我工作的公司不允許使用angular-ui。我在我的代碼中使用這個控制器作爲指令。你的意思是說可排序的本身是作爲一個單獨的指令來處理的嗎？ – codewarrior

如果你使用控制器指令，那麼操縱dom就可以了:)（至少對我來說）。我認爲，把這個指令的「鏈接」排序也很好 –

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>

來源

2016-04-07 20:47:26

ng-repeat和jquery ui可排序

回答

相關問題