I want that on click of "Add to Cart" button, item will add on "My Cart". Here is my angularJS code
app.controller("OnlineShopping", function($scope)
{
$scope.items = [
{Product:"Moto G2", Desc: "Android Phone", Price: 10999},
{Product:"The Monk who sold his ferrari", Desc: "Motivational book", Price: 250},
{Product:"Mi Power Bank", Desc: "Power Bank", Price: 999},
{Product:"Dell Inspiron 3537", Desc: "Laptop", Price: 45600}
];
$scope.editing = false;
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
I found some questions here with using ng-model
and ng-bing
but it works with textbox, but here I am not taking input from the textbox. Here is my incomplete code for "My Cart"
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr ng-repeat="item in items">
<!-- What should be here -->
</tr>
</table>
You just need to add the cell values using the . But before that When you click on "Add to Cart" button the item needs to be added to a different variable $scope.myCartItems
$scope.addToCart = function(item)
{
$scope.myCartItems.push(item);
}
And the template will change like below,
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
</tr>
<tr ng-repeat="item in myCartItems">
<td>{{item.Product}}</td>
<td>{{item.Desc}}</td>
<td>{{item.Price}}</td>
</tr>
</table>
Take a look at this plnkr. http://plnkr.co/edit/zW7k8J9it1NIJE3hEwWI?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With