Sortieren oder Neuanordnen von Zeilen einer Tabelle in angularjs (Drag & Drop)

Question

Ich wollte die Funktionalität haben, Zeilen in einer Tabelle neu anzuordnen (Zeilen mit Drag & Drop sortieren). Und der Index der Zeilenanordnung sollte sich auch im Modell ändern.

Wie kann ich etwas Ähnliches tun: http://jsfiddle.net/tzYbU/1162/ unter Verwendung der Winkeldirektive?

Ich erzeuge Tabelle als:

<table id="sort" class="table table-striped table-bordered"> 
    <thead> 
    <tr> 
     <th class="header-color-green"></th> 
     <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="rule in Rules.data"> 
    <tr> 
     <td class="center"><span>{{rule.ruleSeq}}</span></td> 
     <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

ich es geschafft habe, hier ist die Geige: Sortable Rows of Table

HTML

<div ng:controller="controller"> 
    <table style="width:auto;" class="table table-bordered"> 
     <thead> 
      <tr> 
       <th>Index</th> 
       <th>Count</th> 
      </tr> 
     </thead> 
     <tbody ui:sortable ng:model="list"> 
      <tr ng:repeat="item in list" class="item" style="cursor: move;"> 
       <td>{{$index}}</td> 
       <td>{{item}}</td> 
      </tr> 
     </tbody>{{list}} 
     <hr> 
</div> 

Richtlinie (JS)

var myapp = angular.module('myapp', ['ui']); 

myapp.controller('controller', function ($scope) { 
    $scope.list = ["one", "two", "thre", "four", "five", "six"]; 
}); 

angular.bootstrap(document, ['myapp']); 

Answer 2

AngularJS nicht wirklich für die Manipulation von DOM-Elemente, sondern zu der HTML-Code einer Seite erstrecken gebaut wurde.

Siehe diesen question und this Wikipedia-Eintrag.

Für DOM Manipulation, jQuery/mootools/etc wird Ihnen gut passen (Hinweis: das Beispiel in Ihrem jsFiddle-Link).

Sie könnten AngularJS wahrscheinlich verwenden, um die Reihenfolge Ihrer Elemente zu verfolgen, um Ihr Modell zu aktualisieren. Ich bin mir nicht sicher, wie dies mit Richtlinien zu tun, aber der folgende Code kann nützlich sein

var MyController = function($scope, $http) { 
    $scope.rules = [...]; 
    ... 

} 

var updateRules = function(rule, position) { 
    //We need the scope 
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController' 

    //Update scope.rules 
} 

Dann, wenn Sie die Liste zu verschieben, einfach updateRules() mit der geändertenen Regel nennen und seine neuen Position im Modell.

Answer 3

Wenn ich Sie richtig verstehe, Sie wollen in der Lage sein die Reihen sortieren? Wenn ja, verwenden UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

Answer 4

Es gibt eine andere Bibliothek: RubaXa/Sortable: https://github.com/RubaXa/Sortable

Es ist für moderne Browser und ohne jQuery Abhängigkeit. Enthalten ist eine Winkelanweisung. Ich werde es jetzt überprüfen.

Sie erhalten zusätzlich eine gute Touch-Unterstützung.

Answer 5

Zusammen mit RubaXa/Sortable gibt es eine weitere Bibliothek AngularJS Avilable die Winkel-ui-tree ist. Zusammen mit Drag & Drop wir Elemente in einer Baumstruktur anordnen können, und wir können hinzufügen und löschen Elemente (Knoten)

Bitte beachten Sie die auf diesen Link für Beispiele

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example.

Bitte beachten Sie dies für Github

https://github.com/angular-ui-tree/angular-ui-tree.

Answer 6

Jeder, der so etwas will, aber die akzeptierte Antwort nicht versteht. Hier ist eine Direktive UI.Sortable für AngularJS, mit der Sie ein Array/Tabellenzeilen mit Drag & Tropfen sortieren können.

Anforderungen

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions) 
JQueryUI v1.12+ 
AngularJS v1.2+ 

Nutzungs

Legen Sie die Skriptdatei: sortable.js in Ihrer Anwendung: (Sie können diese sortable.js von here

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script> 

finden

stellen Sie sicher, JQuery aufgenommen haben, AngularJS und jQueryUI js Dateien in Reihenfolge vor diesem sortierbar Datei das sortierbare Modul als Abhängigkeit Anwendungsmodul hinzufügen:

var myAppModule = angular.module('MyApp', ['ui.sortable']) 

die Richtlinie auf Ihre Formularelemente Nehmen :

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

Entwicklung Anmerkungen:

1. Das ng-Modell ist erforderlich, damit die Richtlinie weiß, welches Modell aktualisiert werden soll.
2. ui-sortierbaren Element sollte nur ein ng-repeat
3. Filter enthalten, die das Modell (wie Filter, orderBy, LimitTo, ...) manipulieren sollte in der Steuerung anstelle der angewendet werden ng-repeat

3. Punkt ist sehr wichtig, da es dauerte fast eine Stunde zu verstehen, , warum meine Sortierung nicht funktioniert ?? Es war wegen OrderBy in html und das war die Sortierung wieder zurückgesetzt.

Für mehr Verständnis können Sie das Detail überprüfen here.