AngularJSでsortableのサンプル
最近ちょっとAngularJsを触りだしました。
まだ本家のチュートリアルとドットインストールを
やったくらいのレベル。
今後業務でsortableなリストとか作る
必要がありそうなので調査。
どうも「AngularUI」を使ってみるとイイっぽい。
■AngularUI
http://angular-ui.github.io/
以下のサイトでも紹介されています。
■AngularUIってどんなもの？
http://knightso.hateblo.jp/entry/2014/04/02/182924
「AngularUI」内の「UI-Modules」にある「ui-sortable」を利用して
作成してみます。
「ui-sortable」の使い方は以下。
angular-ui/ui-sortable
https://github.com/angular-ui/ui-sortable
で、実際にsortableなものを作ってみたのがこちら。
一応ソース
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AngularJs sortable sample</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script>
var app = angular.module('myApp', ['ui']);
app.controller('myCtrl', function($scope) {
// サンプルデータ
$scope.items = [
{'title' : 'aaaaa'},
{'title' : 'bbbbb'},
{'title' : 'ccccc'},
{'title' : 'ddddd'},
{'title' : 'eeeee'},
{'title' : 'fffff'},
{'title' : 'ggggg'},
{'title' : 'hhhhh'},
{'title' : 'iiiii'},
];
// jQueryUIのsortableのオプションが使える。
$scope.sortableOptions = {
axis: 'y'
};
});
</script>
</head>
<body ng-controller="myCtrl">
<div class="container" style="margin-top:20px;">
<h1>AngularJs sortable sample.</h1>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
↓並び替え
</div>
<div class="list-group" ui-sortable="sortableOptions" ng-model="items">
<a class="list-group-item" href="#" ng-repeat="item in items">{{item.title}}</a>
</div>
</div>
</div>
<div class="col-md-8">
<h3>↓データの状態</h3>
<pre>{{items|json}}</pre>
</div>
</div>
</div>
</body>
</html>
すっきりしてていい感じ。