AngularJS - missing ng-model items in $scope objec

Question

I'm trying to create a table in which you can edit each row and save your changes. I'm having trouble posting all of the items in the row after pressing save. For some reason, only some of the elements are being sent. Any help or insight would be appreciated.

Here is a plunker of my code

I watched the console in dev tools, and it looks like the $scope.editedEvent object (line 12 in app.js) contains undefined paramaters, except for "name".

Answer 1

Are only name and distance sent? Then look at your convertEvent function ... you are creating a new object with to fields: name and distance.
greetings

Answer 2

As I said in my comment, you can't put ng-model and ng-bind ( or {{}} ) in the same element. Ng-model is for input type fields (input, select, textarea...) and ng-bind for span,div,etc.

So based on what I've understood from your question I've updated the code to make it "angular compliant", when you click the save button it will update the $scope variable editedEvent with the contents of that row and the selected value from the select.

plunkr

Answer 3

Here's a fork with some corrections to achieve what I believe you are looking for:

http://plnkr.co/edit/HTERoyQnP2YQfjnjUVb7

In setting the editedEvent object to use the scope variables you are binding those values to those variables so they stay in sync. Because of this, the editedEvent object is changing out from under you by the time you save (everything is set back to undefined ready for the new "editing" state). Just create a blank editedEvent object and Angular will just fill those out using hg-model instead.