Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
14
rated 0 times [  16] [ 2]  / answers: 1 / hits: 69341  / 9 Years ago, tue, may 12, 2015, 12:00:00

snapshot



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>

More From » jquery

 Answers
5

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


[#66632] Saturday, May 9, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
victorr

Total Points: 193
Total Questions: 86
Total Answers: 105

Location: Pitcairn Islands
Member since Thu, Jun 24, 2021
3 Years ago
victorr questions
Fri, Nov 13, 20, 00:00, 4 Years ago
Sat, Jul 25, 20, 00:00, 4 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
;