关于angularjs：手动更新Angular-UI UI-Sortable项目


Manually Update Angular-UI UI-Sortable Items

本质上，我希望用户能够拖放项目或单击向上/向下箭头在列表中移动项目。

是否有一种很好的方法来更新与ui-sortable / angular-ui配合使用的项的索引？

谢谢。

更新

我们能够通过在控制器中添加一个函数来解决此问题，该函数将从数组中删除该项并将其重新添加到比其原始位置更大或更小的索引中。这是个草率的示例：

1
2
3
4
5
$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/

您需要添加一个检查，确定它是数组中的第一个还是最后一个元素，以相应地禁用上或下。

相关讨论

我们能够通过在控制器中添加一个函数来解决此问题，该函数将从数组中删除该项并将其重新添加到比其原始位置更大或更小的索引中。这是个草率的示例：

1
2
3
4
5
$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/

您需要添加一个检查，确定它是数组中的第一个还是最后一个元素，以相应地禁用上或下。

与所有AngularJS一样，答案是"思考Angular，而不是jQuery"。

此CodePen很好地说明了如何执行此操作。基本上，您有一个范围限定的temp对象用于拖动，然后将其推入ng-repeat的bound数组。我不能称赞它(不是我的创造)，但是Google很快就将我引向了我。 CodePen不使用任何外部依赖关系，但是正如您所看到的，与使用Angular-UI之类的东西相比，这意味着更多的工作。

这是一个显示相同概念的JSFiddle，但具有Angular-UI依赖性。使用angular-ui的优点是只需按以下方式调用绑定的数据数组：

1
2
3
4
5
var myapp = angular.module('myapp', ['ui']);

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

这意味着您已经减少了工作量，因为已经知道了。 AngularJS可以很好地与jQuery很好地结合使用，因此这并不意味着jQuery UI的开发方法会发生重大变化，这取决于您的用例。

相关讨论