ionic framework - AngularJS local storage only last item stored -


i facing issues storing local storage in angularjs. developing e-commerce mobile appication using ionic framework , displaying product data using ng-repeat. each of ion-item has product details , button associated additem() in todocontroller.on click of button, product data gets stored local storage. however, issue that, whenever click through series of buttons, last product button clicked gets stored in local storage , previous clicked button's data doesn't.

<a class="item item-thumbnail-left" href="#">         <img ng-src={{product.featured_image.source}}>         <div class="row">             <div class="col">                 <h3><span ng-bind="product.id"></span></h3>                 <h3><span ng-bind="product.title"></span></h3>             </div>         </div>         <div class="row">             <div class="col">                 <p>{{product.meta_fields.woo.currency_symbol}}{{product.meta_fields.woo.price}}</p>             </div>         </div>          <div class="row">             <div class="col">                 <p>qty</p>                                   <select ng-init="quantity = '1'" ng-model="quantity">                         <option value="1">1</option>                         <option value="2">2</option>                         <option value="3">3</option>                         <option value="4">4</option>                         <option value="5">5</option>                         <option value="6">6</option>                         <option value="7">7</option>                         <option value="8">8</option>                         <option value="9">9</option>                         <option value="10">10</option>                         <option value="11">11</option>                         <option value="12">12</option>                         <option value="13">13</option>                         <option value="14">14</option>                         <option value="15">15</option>                     </select>                 </div>           <div class="col"></div>          <div class="col" ng-controller="todocontroller">             <button ng-click="additem(product.id, product.title,none , product.meta_fields.woo.price,  quantity)">add me</button>             </div>        </div>     </a> 

controller

.controller('todocontroller', function($scope) {     $scope.saved = localstorage.getitem('todos');   $scope.todos = (localstorage.getitem('todos')!==null) ? json.parse($scope.saved) : [];   localstorage.setitem('todos', json.stringify($scope.todos));      $scope.additem = function (id,item,size,price,quantity) {         $scope.todos.push({id,item,size,price,quantity});         localstorage.setitem('todos', json.stringify($scope.todos));     }  }) 

issue in controller, passing values in object without keys. need modify $scope.additem function

   $scope.additem = function(id, item, size, price, quantity) {     $scope.todos.push({       id: id,       item: item,       size: size,       price: price,       quantity: quantity     });     localstorage.setitem('todos', json.stringify($scope.todos));   } 

also have created plunker example you, have @ http://plnkr.co/edit/3uzj0zz9tvyftjfyegv4?p=preview


Comments