Aggiorna manualmente gli elementi ordinabili nell'interfaccia utente angolare

Question

In sostanza, vorrei che gli utenti fossero in grado di trascinare e rilasciare un elemento o fare clic sulle frecce su/giù per spostare un elemento nell'elenco.

C'è un buon modo per aggiornare gli indici degli elementi che funzionano bene con ui-sortable/angular-ui?

Grazie.

aggiornamento

siamo stati in grado di risolvere questo aggiungendo una funzione nel nostro controller che rimuovere l'elemento dall'array e inserirlo ritorno in un indice maggiore o minore rispetto alla sua posizione originale. Ecco un esempio sciatta:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

si avrebbe bisogno di aggiungere un controllo se fosse la prima o l'ultima elem nella matrice di disattivare alto o in basso di conseguenza.

Answer 1

siamo stati in grado di risolvere questo problema aggiungendo una funzione nel nostro controller che avrebbe rimosso l'elemento dall'array e lo avrebbe aggiunto in un indice maggiore o minore rispetto alla sua posizione originale. Ecco un esempio sciatta:

$scope.upDown = function(oldIndex, newIndex) { 
    var item = $scope.list[oldIndex]; 
    $scope.list.splice(oldIndex,1); 
    $scope.list.splice(newIndex,0,item); 
}; 

http://jsfiddle.net/69auq/1/

si avrebbe bisogno di aggiungere un controllo se fosse la prima o l'ultima elem nella matrice di disattivare alto o in basso di conseguenza.

Answer 2

Come per tutto AngularJS, la risposta è "think in Angular, not jQuery".

This CodePen fa un buon lavoro illustrando come farlo. Fondamentalmente, hai un oggetto temporale con scope per il trascinamento, che poi inserisci nell'array associato di ng-repeat. Non posso prendermene il merito (non la mia creazione), ma Google mi ha portato a farlo abbastanza velocemente. CodePen non usa alcuna dipendenza esterna, ma come puoi vedere, significa un po 'più di lavoro che usare qualcosa come Angular-UI.

Ecco lo a JSFiddle che mostra lo stesso concetto, ma con la dipendenza da Angular-UI. Il vantaggio di utilizzare angolare-ui è che l'array dati associati ha solo bisogno di essere invocata in quanto tale:

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

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

Questo significa meno lavoro da parte vostra, dal momento che è già stato capito. AngularJS fa un buon lavoro giocando bene con jQuery, quindi questo non dovrebbe dettare un enorme cambiamento nell'approccio allo sviluppo dall'interfaccia utente di jQuery, a seconda del tuo caso d'uso.