Question

我真的不喜欢如何记录angular-ui。有时他们真的不解释很多。这是sortable-ui的文档：https://github.com/angular-ui/ui-sortable

首先，我无法传递选项。

$scope.sortableOptions = {
    cursor:"move"
};

我还将"move"更改为"pointer"或"crosshair"。没有任何事情发生。

其次，我需要按用户已排序的新订单更新后端。我根本不是一个伟大的javascripter（更多的是后端开发人员）。我能找到的唯一与订单相关的js函数是indexof()。然后它变得非常复杂，因为我需要迭代所有元素并找到新的顺序，因为用户已经重新排列了所有元素。

每当更新sortable指令时，是否有更简单的方法来获取列表的当前顺序？

我在plunker上创建了一个演示（因为它允许我添加额外的库）

http://plnkr.co/edit/uNErHgKL3ohNyFhgFpag?p=preview

光标部分再次无效，我不知道如何获取这些项目的顺序。

我看到Sortable UI页面上有方法......我是angularJS的新手。我只是想不出如何在AngularJS代码中调用这些方法。

Seralize method / toArray可能不是一个好主意..我正在处理的实际数据看起来不像["one", "two", "three"]。它更像是：

[{"id":"5","article_name":"New Article 
  Title","article_order":"1","article_author":"Author","article_body":"Start typing your 
  article here!","is_visible":"1","created_date":"2013-10-27 
  05:37:38","edit_date":null,"magazineID":"7"},

 {"id":"13","article_name":"New Article 
 Title","article_order":"2","article_author":"Author","article_body":"Start typing your 
 article here!","is_visible":"1","created_date":"2013-10-27 
  05:45:10","edit_date":null,"magazineID":"7"}]

如果你们调查这个数据流......有一个名为article_order的属性。这是我试图修改的属性（数据库列）......

Answer 1

阅读jQuery UI Sortable docs。您可以绑定许多事件以及序列化已排序元素的方法。在您要使用的事件回调中，您可以使用更新的数据对服务器进行ajax调用

这个角度模块只是jQuery UI Sortable的包装器。

在jsfiddle或plunker中创建演示，显示您遇到的问题

Answer 2

如果您使用我的新可排序的Angular.js指令，您可以这样做：

$scope.items = [{"id":"5","article_name":"New Article 
  Title","article_order":"1","article_author":"Author","article_body":"Start typing
  your article here!","is_visible":"1","created_date":"2013-10-27 
  05:37:38","edit_date":null,"magazineID":"7"},

  {"id":"13","article_name":"New Article 
  Title","article_order":"2","article_author":"Author","article_body":"Start typing
  your article here!","is_visible":"1","created_date":"2013-10-27 
  05:45:10","edit_date":null,"magazineID":"7"}];

$scope.onChange(fromIdx, toIdx) {
   $scope.items[fromIdx].article_order = toIdx;
   $scope.items[toIdx].article_order = fromIdx;

   // OR
   // var temp = $scope.items[fromIdx].article_order;
   // $scope.items[fromIdx].article_order = $scope.items[toIdx].article_order;
   // $scope.items[toIdx].article_order = temp;
}

HTML：

<ul ng-sortable="items"
    ng-sortable-on-change="onChange">
    <li ng-repeat="item in items" class="sortable-element" ng-style="{backgroundColor: item.color}">
        {{item.name}}, {{item.profession}}
    </li>
</ul>

请在此处查看演示+文档：

Answer 3

我想我遇到了一个与你类似的问题。如果我们订阅更新回调，我们就不会获得最新的订单。但是使用stop事件处理程序帮助了我。使用angular ui sortable时，我们使用stop事件处理程序中的最新顺序更新模型。您可以将此数据发布到后端或您要存储的任何位置。希望这有助于......：）

您可以在此处参考jquery ui可排序文档 http://api.jqueryui.com/sortable/#event-stop

更新后的Angular UI Sortable获取索引

3 个答案: