AngularJSメモ：ドラッグ操作で並び替えて保存 ②/2

こんにちは。

前回の続きです。
ドラッグ操作で並び替えができるリスト要素とそれに連動するパネル要素を作るところまで行きましたので、あとはこの並び順がリロード時や他のページでも再現されるように保存する機能を作っていきます。
今回はcookieへの保存ができるようにします。

デモ環境では省略していますが、

下記の要領でパネルの並び順をcookie保存しました。

 

並び順をCookieに保存する

saveという保存用のメソッドを作り、並び替え操作があるたびに呼び出されるようにします。

ui.sortablのstop オプションでは、並び替えの際のドロップ操作完了のたびに呼ぶ処理を設定できます。

保存用のsaveメソッドを定義して、sortableOptionsの’stop’に指定しました。

 

cookieのセットには、angukarの公式サイトで提供されているngCookiesモジュールを使いました。

・https://docs.angularjs.org/api/ngCookies

 

配列オブジェクト $scope.Panelsをjson形式の文字列にしてcookieに保存します。

 

こんな感じ

javaScript(AngularJSのコントローラー内)：

    var panelsData =angular.toJson($scope.Panels, false);

    $cookies.put('Panels',panelsData);

 

 

あとは、ページロード時にcookieにPanelsのデータが保存されている場合はそれを読み込んでデコードして$scope.Panelsに代入するという処理を書きます。

 

こんな感じ

javaScript(AngularJSのコントローラー内)：

    $scope.panelCookie = angular.fromJson($cookies.get('Panels'));

    $scope.Panels=$scope.panelCookie;

 

 

これでドラッグで並び替えて保存、再現の簡単なUIができました。

 

・ngCookiesモジュールはAngularJs1.3から1.4にかけて書き方や機能の変更があったようなので、過去の記事を調べるときには要注意です。

$cookiesサービスを利用する際の注意点とは？

http://www.buildinsider.net/web/angularjstips/0041

 

・ng-repeatをうまいこと使って繰り返しで出力する要素に任意のhtmlのテンプレートを割りつけたりすれば、一つずつ構造の違うものでもこの要領で並び替えられそうです。

 （実際に今回やりたかったのは実はこれです。）

 

三日以内に更新と思っていましたが結局無理でした^^;

また何かネタをみつたら開発メモ書きたいと思います。