0

angular-ui の文書化方法が本当に嫌いです。時々、彼らは本当に多くを説明しません。これは sortable-ui のドキュメントです: https://github.com/angular-ui/ui-sortable

まず、オプションを渡すことができません。

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

またはにも変更"move"しました。何も起こりません。"pointer""crosshair"

次に、ユーザーが並べ替えた新しい順序でバックエンドを更新する必要があります。私はまったく優れた JavaScript 作成者ではありません (どちらかというとバックエンド開発者です)。私が見つけることができる唯一の注文関連の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"}]

このデータ ストリームを調べると、 という属性が 1 つありますarticle_order。これは、変更しようとしている属性 (データベース列) です...

4

3 に答える 3

3

jQuery UI Sortable docsを読んでください。バインドできるイベントと、並べ替えられた要素をシリアル化するためのメソッドが多数あります。使用したいイベントコールバック内で、更新されたデータでサーバーへの 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

私はあなたに似た問題に遭遇したと思います。update コールバックをサブスクライブすると、アイテムの最新の順序は取得されません。しかし、stop イベント ハンドラーを使用すると役に立ちました。angular ui sortable を使用している間、停止イベント ハンドラーで最新の順序でモデルを更新します。このデータをバックエンドまたは保存したい場所に投稿できます..これが役立つことを願っています... :)

ここで停止についてjquery uiのソート可能なドキュメントを参照できます http://api.jqueryui.com/sortable/#event-stop

于 2016-02-15T14:16:11.397 に答える