How to add item in list in angularJS?

Question

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>

do you want us to complete your code..or you have some doubts? — Pankaj Parkar
– Pankaj Parkar, Commented May 12, 2015 at 21:07
@pankajparkar I just want to know where I am going wrong. Check kathir answers — Sagar
– Sagar, Commented May 13, 2015 at 7:17
I was expecting you to update your question..bdw glad to see your problem is solved — Pankaj Parkar
– Pankaj Parkar, Commented May 13, 2015 at 7:18

Kathir · Accepted Answer · 2015-05-12 21:15:56Z

14

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

edited May 12, 2015 at 21:15

answered May 12, 2015 at 21:08

Kathir

6,2068 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sagar Over a year ago

works fine after adding console.log("Adding to the cart"); console.log(item); in my angularJS code. It will be more helpful for me and others also if you can explain what does it do?

Kathir Over a year ago

console.log statements are only for debugging purpose, they dont make any difference to the functionality of the method.

user3338802 · Accepted Answer · 2015-05-12 21:05:30Z

0

It looks good.

Try removing the line

$scope.item = {};

and also wrap it around a $watch

$scope.$watch('items', function(){
      console.log('items changed');
});

answered May 12, 2015 at 21:05

user3338802

Collectives™ on Stack Overflow

How to add item in list in angularJS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related