0

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

首先，我不能传递选项。

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

"move"我也改成"pointer"or "crosshair"。什么都没发生。

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

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

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

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

光标部分再次不起作用，我不知道如何获得这些项目的顺序。

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

Seralize 方法/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. 这是我要修改的属性（数据库列）...

4

3 回答 3

3

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

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

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

于 2013-10-28T18:51:27.157 回答
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>

在此处查看演示 + 文档：

于 2014-05-10T15:30:39.553 回答
0

我想我遇到了和你类似的问题。如果我们订阅更新回调，我们不会得到最新的项目订单。但是使用停止事件处理程序帮助了我。在使用 angular ui sortable 时，我们在停止事件处理程序中使用最新顺序更新模型。您可以将此数据发布到后端或您想要存储的任何位置..希望这会有所帮助...:)

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

于 2016-02-15T14:16:11.397 回答