71 lines
3.2 KiB
HTML
71 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="Directives">
|
|
<head>
|
|
<title>Angular example with connected lists</title>
|
|
<link rel="stylesheet" href="../bower_components/basscss/css/basscss.css">
|
|
</head>
|
|
<body>
|
|
<div class="clearfix mb2 white bg-navy">
|
|
<div class="left">
|
|
<a href="index.html" class="button py2 m0 button-transparent">HTML5 Sortable</a>
|
|
<a href="angular-single.html" class="button button-narrow py2 m0 button-transparent">Angular single</a>
|
|
<a href="angular-connected.html" class="button button-narrow py2 m0 button-transparent is-active">Angular connected</a>
|
|
<a href="angular-ngRepeat-connected.html" class="button button-narrow py2 m0 button-transparent">Angular ngRepeat</a>
|
|
</div>
|
|
<div class="right">
|
|
<a href="#!" class="button py2 m0 button-transparent">Fork on GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div class="px2 sm-px3 py2 mb3 col-8 mx-auto" ng-controller="MainCtrl">
|
|
<section class="mb3 mx-auto col col-12">
|
|
<div class="p3 navy bg-yellow">
|
|
<div class="flex flex-column">
|
|
<h1 class="h1 m0 flex-auto">
|
|
Angular example with connected lists
|
|
</h1>
|
|
<div class="col col-12">
|
|
<div class="mt2 p2 bg-yellow border navy border-navy">
|
|
<code class="mb0">
|
|
<div class="muted">// Connect two lists by passing the connectWith option to the html-sortable directive:</div>
|
|
<div><ul html-sortable="{ connectWith: '.connected' }" class="connected" ng-model='data1'>...</ul></div>
|
|
<div><ul html-sortable="{ connectWith: '.connected' }" class="connected" ng-model='data2'>...</ul></div>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sm-flex flex-center mxn2">
|
|
<div class="col col-6">
|
|
<ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data1'>
|
|
<li class="p1 mb1 yellow border border-navy bg-navy" ng-repeat="itm in data1">{{itm}}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col col-6">
|
|
<ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data2'>
|
|
<li ng-repeat="itm in data2" class="p1 mb1 navy border border-navy bg-yellow">
|
|
{{itm}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="sm-flex flex-center mxn2">
|
|
<div class="col col-12 m2">
|
|
<h3 class="h3">Model 1:</h3>
|
|
<pre>{{ data1 }}</pre>
|
|
<h3 class="h3">Model 2:</h3>
|
|
<pre>{{ data2 }}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script src="../bower_components/angular/angular.min.js"></script>
|
|
<script src="../dist/html.sortable.js"></script>
|
|
<script src="../dist/html.sortable.angular.js"></script>
|
|
<script src="../src/html.sortable.src.js"></script>
|
|
<script src="../src/html.sortable.angular.js"></script>
|
|
<script src="angular-connected.js"></script>
|
|
</body>
|
|
</html>
|