AngularJSでsortableのサンプル


AngularJSでsortableのサンプル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なものを作ってみたのがこちら。

DEMO

一応ソース

<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>

すっきりしてていい感じ。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です