Ordina o riordina le righe di una tabella in angularjs (trascina e rilascia)

Volevo avere la funzionalità di riorganizzare le righe in una tabella (ordinando le righe usando il drag and drop). E l’indice della disposizione delle righe dovrebbe anche cambiare nel modello.

Come posso fare qualcosa di simile a questo: http://jsfiddle.net/tzYbU/1162/ utilizzando la direttiva angular?

Sto generando una tabella come:

{{titles.title}}
{{rule.ruleSeq}} {{statusArr[data.value]}}

L’ho fatto. Vedi il mio codice qui sotto.

HTML

 
{{list}}
Index Count
{{$index}} {{item}}

Direttiva (JS)

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

C’è un’altra libreria: RubaXa / Sortable: https://github.com/RubaXa/Sortable

È per i browser moderni e senza dipendenza da jQuery. Incluso è una direttiva angular. Vado a dare un’occhiata ora.

Hai anche un buon supporto per il touch.

AngularJS non è stato realmente creato per la manipolazione di elementi DOM, piuttosto per estendere l’HTML di una pagina.

Vedi questa domanda e questa voce di Wikipedia.

Per la manipolazione del DOM, jQuery / mootools / etc ti andrà bene (suggerimento: l’esempio nel tuo link jsFiddle).

Probabilmente potresti usare AngularJS per tenere traccia dell’ordine dei tuoi elementi per aggiornare il tuo modello. Non sono sicuro di come farlo usando le direttive, ma il codice seguente potrebbe essere utile

 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 } 

Quindi, quando si riordina l’elenco, è sufficiente chiamare updateRules() con la regola modificata e la sua nuova posizione nel modello.

Se ti capisco correttamente, vuoi essere in grado di ordinare le righe? In tal caso, utilizzare UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

Insieme a RubaXa / Sortable c’è un’altra libreria angularjs disponibile che è angular-ui-tree . Insieme al drag and drop possiamo organizzare elementi in una struttura ad albero e possiamo aggiungere ed eliminare elementi (nodes)

Si prega di consultare questo link per gli esempi

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

Si prega di vedere questo per Github

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

Qualcun altro che vuole qualcosa di simile ma che non capisce la risposta accettata. Ecco una direttiva UI.Sortable per AngularJS che consente di ordinare le righe di una matrice / tabella con il drag & drop.

Requisiti

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

uso

Carica il file di script: sortable.js nella tua applicazione: (puoi trovare questo sortable.js da qui

  

assicurati di aver incluso i file jQuery, AngularJs e JQueryUI js prima di questo file ordinabile Aggiungi il modulo ordinabile come dipendenza al modulo dell’applicazione:

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

Applica la direttiva ai tuoi elementi del modulo:

 
  • {{ item }}

Note di sviluppo:

  1. ng-model è richiesto, in modo che la direttiva sappia quale modello aggiornare.
  2. L’elemento ui-ordinabile dovrebbe contenere solo una ng-repeat
  3. I filtri che manipolano il modello (come filtro, orderBy, limitTo, …) dovrebbero essere applicati al controller invece di ng-repeat

Il 3 ° punto è molto importante in quanto ci è voluta quasi un’ora per capire perché il mio smistamento non funzionava ?? Era a causa di orderBy in html e questo stava ripristinando di nuovo l’ordinamento.

Per maggiore comprensione puoi controllare i dettagli qui .