In the process of developing a web application, we are implementing functionality that allows users to add line items and modify the price, quantity, and description.
After some hard work, we have made progress and you can view our work here:
http://jsfiddle.net/75m7e/2067/
You can see the issue demonstrated here:
This is the JAVASCRIPT code:
function CartForm($scope) {
$scope.searchInfo = [];
$scope.invoice = {
items: [{
product_name: 'x',
qty: 10,
description: 'item',
cost: 9.95
},
{
product_name: 'y',
qty: 170,
description: 'item',
cost: 8
},
{
product_name: 'z',
qty: 150,
description: 'item',
cost: 7
}],
selectedItem : []
};
$scope.addItem = function() {
$scope.invoice.selectedItem.push({
qty: null,
description: null,
cost: null,
product: null,
total: null
});
};
$scope.removeItem = function(index) {
$scope.invoice.selectedItem.splice(index, 1);
};
$scope.total = function() {
var total = 0;
$scope.invoice.selectedItem.forEach(function(item, index){
total += item.total;
})
return total;
};
$scope.calculateTotal = function(selected, index){
$scope.invoice.selectedItem[index].description = selected.description;
$scope.invoice.selectedItem[index].qty = selected.qty;
$scope.invoice.selectedItem[index].cost = selected.cost;
$scope.invoice.selectedItem[index].product = selected.product;
$scope.invoice.selectedItem[index].total = selected.qty*selected.cost;
};
}
If you visit the provided URL, you will notice that changing the quantity or cost for one row affects other rows with the same product name. Each row should maintain unique quantity and cost information without affecting others.
I am struggling to figure out where I went wrong in my code.
Your assistance in resolving this issue would be greatly appreciated. Thank you in advance!