Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am writing an application in Angular JS (1.5), and I need to be able to track a model for changes (updates/deletes/additions). For example, I have an ng-model that holds an array of user pets. This array has 5 pets, but the user (from the front end) can delete pets from that model or add more pets. I want to be able to keep track of what pets were removed from the array and what pets were added, so that I can remove the deleted pets from the database, leave the unchanged pets, and add the new pets. I would assume I need 2 operations for this - delete and insert, but I am not sure how to go about this.

How would I best keep track of these changes in Angular? I would like to follow the "unit of work" pattern, but I am not sure how to go about this in Angular and Javascript. I was thinking of using 3 arrays; one for existing data, one for deleted data, and one for new data. I would then send the deleted and inserted data for the post request. Does that make sense?

share|improve this question
    
A question : angularJS 1 or 2 ? I gave an answer based on angularJS 1. So if it's 2 it probably won't fit. – Walfrat 2 days ago
    
I added the version, it was for 1.X. Thanks! – unseen_damage 2 days ago
    
Tell us what is the problem you are trying to solve exactly? It is better to know the why than the how. – RibaldEddie 2 days ago
    
Have a look at BreezeJS. – devnull 2 days ago

Since you are only looking for the update/delete and additions it would be relatively easier to store the status of the object. It would be easier than storing it in 3 different lists, the model binding would be easier.

Unit of work pattern not necessary here(client side).

When it's time to update the database, you could use the status to update / delete or insert the record to the DB and you could use unit of work pattern (in the server).

share|improve this answer

I don't see the point of watching the model to update, does that mean that every time the user will change one fields you will trigger an update in the database ? How do you handle two list data like country/city then ?

Just use what angular give you to handle forms properly.

Basically considering we're manipulating an array of object inside a ng-repeat your code will look like this :

<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>

Note if you use angular-resource you can even change the updateItemInDatabase to item.$update() deleteItemInDatabaseto item.$delete(). So no need to declare update/delete function in the controller's scope to trigger query ot the server, just load your list of resources in your controller, and you're done.

share|improve this answer

Keeping two arrays one for delete and one for insertion seems a good idea to me and these arrays can be easily maintained with $watch where you can check old and new value. For example:-

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

Sending requests on every insert and delete will increase the number of hits on the server.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.