The more true Angular approach to this problem would be to do as I suggested in my comment, which is to have an array of objects that represent items, displaying them in an ng-repeat. When you click the button that calls addToCart, you should then pass in the entire item into the function, and you have access to all of its properties (i.e. price, id, etc.).
Here's what the bare-bones code would look like:
var app = angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.shoppingCart = [];
$scope.items = [{
id: 1,
price: 1.49,
quantity: 0,
name: "Soup"
}, {
id: 2,
price: 4.75,
quantity: 0,
name: "Chicken"
}, {
id: 3,
price: 2.29,
quantity: 0,
name: "Beef Jerky"
}, {
id: 4,
price: 3.00,
quantity: 0,
name: "Salad"
}, {
id: 5,
price: 0.99,
quantity: 0,
name: "Avocado"
}];
$scope.getCartTotal = function() {
return $scope.shoppingCart.reduce(function(sum, curr) {
return sum + (Number(curr.quantity) * curr.price);
}, 0);
};
$scope.removeFromCart = function(cartItem) {
var item = $scope.items[$scope.items.indexOf(cartItem)];
item.quantity = 0;
$scope.shoppingCart.splice($scope.shoppingCart.indexOf(cartItem), 1);
};
$scope.addToCart = function(item, itemForm) {
var newQuantity = Number(itemForm.qty.$viewValue);
var itemIndex = -1;
$scope.shoppingCart.some(function(elem, index) {
if (elem.id === item.id) {
itemIndex = index;
return true;
}
});
if (itemIndex > -1) {
var currItem = $scope.shoppingCart[itemIndex];
currItem.quantity = newQuantity;
} else {
item.quantity = newQuantity;
$scope.shoppingCart.push(item);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div style="width: 50%; margin-right: 2%; float: left;">
<h3>Items</h3>
<div ng-form="itemForm" ng-repeat="item in items">
Name: {{item.name}}
<br>Price: {{item.price | currency}}
<br>Quantity:
<input type="text" name="qty" ng-model="item.quantity" ng-model-options="{updateOn: 'submit'}" style="width: 50px;" />
<br>
<br>
<button ng-click="addToCart(item, itemForm);">Add To Cart</button>
<hr/>
</div>
</div>
<div style="width: 44%; float: left;">
<h3>Shopping Cart</h3>
<div ng-repeat="item in shoppingCart">
Name: {{item.name}}
<br>Quantity: {{item.quantity}}
<br>Total Price: {{(item.price * item.quantity) | currency}}
<button ng-click="removeFromCart(item)">Remove</button>
<br>
<hr/>
</div>
<hr/>Total # Items: {{shoppingCart.length}}
<br/>Grand Total: <span ng-bind="getCartTotal() | currency"></span>
</div>
</div>
Hope this helps get you on the right track! Let me know if you have any questions =)
UPDATE:
Since you are passing your items to your view from your controller via asp.net MVC, you can inject the values directly from your view into your angular module. Here are a couple examples of how I've done it.
var poCreationApp = angular.module('myApp', []);
poCreationApp.value("defaultLocale", "@ViewBag.SelectedLocale");
poCreationApp.value("userInitials", "@ViewBag.UserInitials");
poCreationApp.controller("myCtrl", ["defaultLocale", "userInitials", "$scope", "$http", function (defaultLocale, userInitials, $scope, $http) {
$scope.locale = defaultLocale;
$scope.userInitials = userInitials;
// .....
}]);
You can also pass through an entire view model like this:
@{
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
serializer.MaxJsonLength = Int32.MaxValue;
var jsonModel = serializer.Serialize(Model);
}
<script>
var app = angular.module("myApp", []);
app.value("viewModel", @Html.Raw(jsonModel));
app.controller("myCtrl", ["viewModel", "$scope", function (viewModel, $scope) {
$scope.model = viewModel;
$scope.items = $scope.model.items;
// ......
}]);
</script>
$(btn).closest('.parentDiv').find('.item-id').val()– Gerard Reches 21 hours ago$event.currentTargetreturns a DOM element if I'm not wrong. You can't use jQuery functions in a DOM element, so you should cast it to a jQuery object.btnis a DOM element, and$(btn)is a jQuery object of that element. – Gerard Reches 21 hours ago