diff --git a/index.html b/index.html index 76a17b5..9c84525 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,7 @@
  • Select2
  • Show / Hide / Toggle
  • TinyMCE
    • +
  • Sortable
  • Currency
    • @@ -967,9 +968,100 @@

    How?

    - +
    +
    +

    Sortable

    +
    +
    +
    +

    What?

    + +
    +
    +

    Drag and drop the parents and children

    +
    +

    Destroy Families

    +

    You're not fit to be a mother!

    +
      +
    • +
        +
        {{parent.name}}
        +
          +
        • {{child}}
          • +
        +
      +
      • +
    +
    +
    +
    + 
    Parents: {{parents|json}}
    +
    +
    +
    +
    +

    How?

    + 
    +<script>
+$scope.parents = [
+  { name: 'Anna', 
+    children: ['Alvin', 'Becky' ,'Charlie'] },
+  { name: 'Barney', 
+    children: ['Dorothy', 'Eric'] },
+  { name: 'Chris', 
+    children: ['Frank', 'Gary', 'Henry'] }
+];
+</script>
+
+<ul ui-sortable ng-model="parents">
+  <li ng-repeat="parent in parents">
+    <h3>{{parent.name}}</h3>
+    <ul class="children"
+      ui-sortable="{connectWith:'.children'}"
+      ng-model="parent.children"> 
+      <li ng-repeat="child in parent.children">
+        {{child}}
+      </li>
+    </ul>
+  </li>
+</ul>
    +
    +
    +
    +
    +
    +
    +
    +

    Static Items

    +
      +
    • First
      • +
    • Second
      • +
    • Third
      • +
    +
    +
    +
    + 
    Static Items: {{items|json}}
    +
    +
    +
    +
    + 
    +<script>
+$scope.items = ['One', 'Two', 'Three'];
+</script>
+
+<ul ng-model="items" ui-sortable>
+  <li>First</li>
+  <li>Second</li>
+  <li>Third</li>
+</ul>
    +
    +
    +
    +

    Currency

    diff --git a/js/app.js b/js/app.js index 0c0df3b..4bca71b 100644 --- a/js/app.js +++ b/js/app.js @@ -93,6 +93,15 @@ function ValidateCtrl($scope) { }; } +function SortableCtrl($scope) { + $scope.parents = [ + { name: 'Anna', children: ['Alvin', 'Becky' ,'Charlie'] }, + { name: 'Barney', children: ['Dorothy', 'Eric'] }, + { name: 'Chris', children: ['Frank', 'Gary', 'Henry'] } + ]; + $scope.items = ['One', 'Two', 'Three']; +} + function ScrollfixCtrl($scope) { $scope.scrollfix = -50; }