手動更新Angular-UI UI-Sortable項目

Question

本質上，我希望用戶能夠拖放項目或單擊上/下箭頭在列表中移動項目。

有沒有一種好的方法來更新與ui-sortable / angular-ui一起使用的項目索引？

謝謝。

更新

我們能夠通過在控制器中添加一個函數來解決此問題，該函數將從數組中刪除該項，然后將其添加回大於或小於其原始位置的一個索引中。 這是個草率的例子：

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

您需要添加檢查它是否是數組中的第一個或最后一個元素，以相應地禁用向上或向下。

Answer 1

與所有AngularJS一樣，答案是“思考Angular，而不是jQuery” 。

該CodePen很好地說明了如何做到這一點。 基本上，您有一個范圍限定的temp對象用於拖動，然后將其推入ng-repeat的bound數組。 我不能稱贊它（不是我的創造），但是Google很快就將我引向了我。 CodePen不使用任何外部依賴關系，但是正如您所看到的，與使用Angular-UI之類的東西相比，這意味着更多的工作。

這是一個顯示相同概念的JSFiddle ，但具有Angular-UI依賴性。 使用angular-ui的優點是只需要這樣調用綁定的數據數組：

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

這意味着您已經減少了工作量，因為已經知道了。 AngularJS可以很好地與jQuery很好地兼容，因此這並不意味着jQuery UI的開發方法會發生重大轉變，具體取決於您的用例。

Answer 2

我們能夠通過在控制器中添加一個函數來解決此問題，該函數將從數組中刪除該項，然后將其添加回大於或小於其原始位置的一個索引中。 這是個草率的例子：

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

您需要添加檢查它是否是數組中的第一個或最后一個元素，以相應地禁用向上或向下。