CODEWITHSUNDEEP
javascriptangularjs
Sheikh Saad
Sheikh Saad

Reputation: 1

Add data in List onclick event

I am trying to add items from textbox into the list and want to display on main page. Here is my code sample

HTML Code:

<div ng-controller="purchaseInvoiceInquiryController as c" ng-init="c.initializeController()">
<input type="text" ng-model="c.name" placeholder="Enter the Book" />
<input type="text" ng-model="c.price" placeholder="Enter a Price" />
<button ng-click="c.addBooks()">Add the Book</button></p>
<td ng-repeat="x in c.books"> {{ x.name + ' - ' + x.price}}</td>

and angular controller code is :

 this.addBooks = function () {
            c.books = [{
                name: c.name,
                price: c.price
            }];
        };

Its only add one item in that list when i try to add another item it will override the values.

Upvotes: 0

Views: 730

Answers (2)

Rakesh Makluri
Rakesh Makluri

Reputation: 647

Initialize books to empty array in controller and use push method of array to add new books. You may need to add logic to avoid duplicates.

this.books = [];
this.addBooks = function () {
  this.books.push({
    name: c.name,
    price: c.price
  });
};

Upvotes: 1

holydragon
holydragon

Reputation: 6728

Use push instead.

this.addBooks = function () {
            c.books.push({
                name: c.name,
                price: c.price
            });
        };

Upvotes: 1

Related Questions