wake-up-neo.net

Sortieren oder Neuanordnen von Zeilen einer Tabelle in anglejs (Ziehen und Ablegen)

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

Wie kann ich etwas ähnliches wie folgt tun: http://jsfiddle.net/tzYbU/1162/ .

Ich generiere 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>
27
Sushrut

Ich habs geschafft. Siehe meinen Code unten.

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']);
48
Sushrut

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

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

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

11
Thomas

AngularJS wurde nicht wirklich für die Manipulation von DOM-Elementen erstellt, sondern für extend den HTML-Code einer Seite.

Siehe diesen Frage und diesen Wikipedia-Eintrag.

Für die DOM-Manipulation eignet sich jQuery/mootools/etc gut für Sie (Hinweis: das Beispiel in Ihrem jsFiddle-Link).

Sie können möglicherweise AngularJS verwenden, um die Reihenfolge Ihrer Elemente zur Aktualisierung Ihres Modells zu verfolgen. Ich bin nicht sicher, wie man dies mit Hilfe von Anweisungen ausführt, aber der folgende Code may 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
}

Wenn Sie die Liste neu sortieren, rufen Sie einfach updateRules() mit der geänderten Regel und ihrer neuen Position im Modell auf.

5

Wenn ich Sie richtig verstehe, möchten Sie die Zeilen sortieren können? Wenn ja, verwenden Sie UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

1
ionat

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

Bitte siehe diesen Link für Beispiele 

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

Bitte siehe github 

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

1

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

Bedarf

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

Verwendungszweck

Laden Sie die Skriptdatei: sortable.js in Ihre Anwendung: (Sie finden diese sortable.js von hier

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

stellen Sie sicher, dass Sie JQuery-, AngularJs- und JQueryUI-JS-Dateien in .__ enthalten haben. Reihenfolge vor dieser sortierbaren Datei Fügen Sie das sortierbare Modul als Abhängigkeit zu Ihrem Anwendungsmodul hinzu:

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

Wenden Sie die Direktive auf Ihre Formularelemente an:

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

Anmerkungen zur Entwicklung:

  1. ng-model ist erforderlich, damit die Direktive weiß, welches Modell aktualisiert werden soll. 
  2. ui-sortierbares Element sollte nur eine Wiederholung enthalten 
  3. Filter, die das Modell beeinflussen (wie filter, orderBy, limitTo, ...), sollten im Controller anstelle des ng-repeat verwendet werden

Der dritte Punkt ist sehr wichtig, da es fast eine Stunde dauerte, um zu verstehen Warum hat meine Sortierung nicht funktioniert? Es war wegen orderBy in HTML und das war das Zurücksetzen der Sortierung wieder.

Zum besseren Verständnis können Sie das Detail hier überprüfen.

0
Null Pointer