综合编程

Manually update the UI-Sortable angular-UI elements

微信扫一扫,分享到朋友圈

Manually update the UI-Sortable angular-UI elements
0

Essentially, I would like users to be able to drag and drop an item or click up/down arrows to move an item in the list.

Is there a good way to update the items’ indexes that plays nice with ui-sortable/angular-ui?

Thanks.

update

we were able to solve this by adding a function in our controller that would remove the item from the array and add it back in one index greater or lesser than its original position. Here is a sloppy example:

$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/

you would need to add a check if it was the first or last elem in the array to disable up or down accordingly.

As with everything AngularJS, the answer is to "think in Angular, not jQuery".

This CodePen
does a good job illustrating how to do it. Basically, you’ve got a scoped temp object for the dragging around, which you then push into the ng-repeat’s bound array. I can’t take credit for it (not my creation), but Google led me to it fairly quickly. The CodePen doesn’t use any external dependencies, but as you can see, it means a bit more work than using something like Angular-UI
.

Here’s a JSFiddle
showing the same concept, but with Angular-UI dependency. The advantage of using angular-ui is that your bound data array needs only to be invoked as such:

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

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

This means less work on your part, since it’s already been figured out. AngularJS does a good job of playing nicely with jQuery, so this shouldn’t dictate a huge shift in development approach from jQuery UI, depending on your use case.

阅读原文...


Hello, buddy!

辩论界人机大战:IBM人工智能和人类辩手几乎打平手

上一篇

71. Simplify Path

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Manually update the UI-Sortable angular-UI elements

长按储存图像,分享给朋友