<!DOCTYPE html> <html ng-app="Directives"> <head> <title>Angular example with a single list</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 is-active">Angular single</a> <a href="angular-connected.html" class="button button-narrow py2 m0 button-transparent">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 single list </h1> <div class="col col-12"> <div class="mt2 p2 bg-yellow border navy border-navy"> <code class="mb0"> <div class="muted">// Use the html-sortable on the container that has the sortable elements: directive:</div> <div><ul html-sortable="{ ... }" ng-model='data1'>...</ul></div> </code> </div> </div> </div> <div class="sm-flex flex-top mxn2"> <div class="col col-6"> <ul class="m2 flex flex-column list-reset" html-sortable="" html-sortable-callback="sortableCallback(sourceModel, destModel, start, end)" ng-model='data1'> <li ng-repeat="itm in data1" class="p1 mb1 yellow border border-navy bg-navy" > {{itm}} </li> </ul> <input type="submit" value="Add another item" class="button ml2 bg-navy" ng-click="add()" /> </div> <div class="col col-6 ml2 mr2"> <h3 class="h3">Model 1:</h3> <p>{{ data1 }}</p> </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-single.js"></script> </body> </html>