Angular.js Dynamic Binding when posting to restful server

Question

Angular.js Dynamic Binding when posting to restful server

I am somewhat confused of the way to achieve the two-way data binding when posting to my server.

I defined my resource like this:

angular.module('todoServices', ['ngResource']).
    factory('Todo', function($resource){
  return $resource('api/v1-0/todos/:todoId', {}, {
    query: {method: 'GET', params:{todoId:''}, isArray: true},
    save: {method: 'POST', isArray: true}
  });
})

and I pass the Todo resource to my controller as a dependency.

Then in my controller I have a method to add a new Todo item to my list:

    $scope.addTodo = function() {
        var savedModel = new Todo();
        savedModel.title =  $scope.title;
        savedModel.description = $scope.description,
        //...
        savedModel.$save();
        $scope.todos.push(savedModel);
    }

This works as far as my todo appears in the list, the call to the server works and the item is added in my database. However, since when I push it to my list, it does not have an ID, yet. The ID is generated by an auto-increment ID in my MySQL database. My server returns the object in JSON format, so I assume, I have to specify some sort of callback function to get the data-binding to work? What exactly do I need to do, so my todo which has been added is updated with the correct ID once my server returns the data?

rest
post
data-binding
angularjs

Answer 1

Simply assign the returned object to the savedModel object. Since calls to resources are asynchronous and return a promise, you should use the success function this way:

 savedModel.$save(
     function success(savedModel) {
         $scope.todos.push(savedModel);
     });

By the way, check the isArray property of the save method, normally should be false.