1

How to include drag and drop to my list ?

file: list.tpl.html

<div class="panel-body">
<table class="table table-striped">
  <thead>
  <tr>
    <th>Lp.</th>
    <th>Nazwa</th>
    <th>Estymacja</th>
    <th>Data</th>
    <th>Ico</th>
    <th>Zaznacz jako wykonane</th>
  </tr>
  </thead>
  <tr data-ng-repeat="todo in todos">
    <td>{{$index+1}}. </td>
    <td><span class="done-{{todo.done}}">{{todo.title}}</span></td>
    <td><span class="done-{{todo.done}}">({{todo.estimates}}h)</span></td>
    <td><span class="done-{{todo.done}}">{{todo.date}}</span></td>
    <td><span class="glyphicon glyphicon-{{todo.type.gico}} done-{{todo.done}}"></span></td>
    <td><input type="checkbox" data-ng-model="todo.done" title="Mark Complete" /></td>
  </tr>
</table>

file: list-ctrl.js

app.controller('listCtrl', function ($scope) { 
 $scope.deleteCompleted = function () {
    $scope.$parent.todos = $scope.$parent.todos.filter(function (item) {
      return !item.done;
    });
  };
});

I'm learning AngularJS, so thanks for help !

Sajal
  • 4,359
  • 1
  • 19
  • 39
Mordziasty
  • 81
  • 1
  • 5
  • From what I understand, you need to use some sort of plugin, and drag and drop is not directly supported. Looks like "angular-dragdrop.js" is one. – VSO Jun 21 '15 at 17:20

1 Answers1

0

I usually dont like adding plugins to my code but in this case you can just add a simple module for drag drop. I use ui-sortable

then you need to simply do

    <ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

this is for a list... a table I guess shouldnt be really different

also check out this solution: solution

Community
  • 1
  • 1
Jony-Y
  • 1,579
  • 1
  • 13
  • 30