Unità di lavoro angolareJS

Dato che stai cercando solo l'aggiornamento / eliminazione e le aggiunte, sarebbe relativamente più semplice memorizzare lo stato dell'oggetto. Sarebbe più facile che memorizzarlo in 3 liste diverse, il binding del modello sarebbe più facile.

Unità di modello di lavoro non necessaria qui (lato client).

Quando è il momento di aggiornare il database, è possibile utilizzare lo stato per aggiornare / eliminare o inserire il record nel DB e utilizzare il modello dell'unità di lavoro (nel server).

Non vedo il punto di guardare il modello da aggiornare, vuol dire che ogni volta che l'utente cambierà un campo, si attiverà un aggiornamento nel database? Come gestisci due dati di lista come paese / città, allora?

Usa semplicemente ciò che ti dà angolare per gestire correttamente le forme.

In sostanza, considerando che stiamo manipolando una matrice di oggetti all'interno di una ng-repeat , il tuo codice sarà simile a questo:

<form name="myForm">
    ... ng-repeat="item in items" ...
    // make a name unique so the validation is unique to each item fields
    <input type="text" ng-model="item.name" required name="{{'name'+$index}}"/>
    <button ng-disabed="myForm.$invalid" ng-click="updateItemInDatabase(item)">Update</button>
    <button ng-disabed="!item" ng-click="deleteItemInDatabase(item)">Delete</button>

Nota se usi angular-resource puoi persino modificare updateItemInDatabase in item.$update() deleteItemInDatabase in item.$delete() . Quindi non è necessario dichiarare la funzione di aggiornamento / cancellazione nell'ambito del controllore per attivare la query del server, basta caricare l'elenco delle risorse nel controller e il gioco è fatto.

Mantenere due array uno per l'eliminazione e uno per l'inserimento mi sembra una buona idea e questi array possono essere facilmente mantenuti con $ watch in cui è possibile verificare il vecchio e il nuovo valore. Ad esempio: -

var scope = $rootScope;
scope.$watch('petsArray', function(newValue, oldValue) {
   if ( newValue !== oldValue ) {
      //Do your changes
    }
});

L'invio di richieste su ogni inserimento ed eliminazione aumenterà il numero di accessi sul server.

Penso che tu possa usare il gestore di callback su ogni operazione di cancellazione e aggiunta, e poi su ogni gestore puoi spingere gli elementi eliminati e aggiunti nella cartella delete e add, rispettivamente, cercando il master principale / collezione originale, quando arriva il momento di archiviare i dati nel database è possibile memorizzare facilmente l'elemento da eliminare e aggiungere la raccolta in questo modo è possibile tenere traccia degli elementi che vengono eliminati e aggiunti.

quindi ad esempio:

<div ng-repeat="item in items">
  <item>
    <span ng-click="onDelete(item)">delete</span>
  </item>
</div>

<span ng-click="onadd(item)">add</span>

scope.onDelete = function(item) {
   scope.items.splice(scope.items.indexOf(item), 1);
   deletedItems.push(item);
};

scope.onAdd = function(item) {
   scope.items.push(item);
   addedItems.push(item);
};

function storeInDataBase() {
  send(deletedItems, addedItems);
  deletedItems = []; addedItems = [];
}