angularJs form not adding object to array properly. 2 way binding not working

Question

I have started a demo app and come across this problem where my parts that I am adding to the repairs are not being properly proccessed. This is my first angular that I am building.

To get the bug press update on one of the repair cards and then scroll down to the quantity and repair item section at the bottom of the form and try to add a new item. it doesnt regester what is in the form.

This is the codepen with the full view that doesnt work.

This is the function in the controller to pass the info the factory.

$scope.addPartsPerRepair = function() {
    partFactory.addPartsPerRepair($scope.newPartsPerRepair);
    $scope.newPartsPerRepair = {};
};

This is the function in the factory to add the new repair to the array partsPerRepair

factory.addPartsPerRepair = function(newPartsPerRepair) {
partsPerRepairs.push(newPartsPerRepair);
};

After I abstracted away the repair factory and simplified my view we are left with this

This is the codepen with the partial view that does work.

I have been over this code for the past 6 hours trying to fix this one probelm and I can not see my issue.

Secondly, This is more of an add-on question, Does anyone have any advice on how to save the partsPerRepair to the actual repair[Idx] instead of in one array called partsPerRepair that every repair accesses. I thought I might be able to add an array called parts to each repair and store quanity and item name in that array but that has proven to be more difficult then I can manage. I realize I am asking two different questions but since your here reading I figured you might be willing.

Thanks in advance for any help.

Answer 1

An updated CodePen.

So I've tried to resolve both your questions here, but all I have edited is the arra yof repairs and the add parts method, which means there is alot of cleaning up chanegs to be made like deleting the old partsPerRepairs and its references.

• First thing newPartsPerRepair needed to be intialized this is why add parts was not working the function was passsing undefined(anything used as model in ng-model needs to be intialized), which is done in the controller - $scope.newPartsPerRepair = {};.
• Second I moved the partsPerRepairs array into the repairs array and called it parts this is under each customer in the array, this is to answer your second question.
• Third I changed the way the ng-repeats work to use these new parts arrays - ng-repeat="partsPerRepair in repairs[$index].parts track by $index"
• Finally I moved and edited the addNewParts to the repairs factory so it used the new parts array and could access the repairs array.

Hope this all helps.