在AngularJS數組中覆蓋的值

Question

我正在創建一個購物應用程序（Angular JS和Ionic）。每當我將物品添加到購物車時，它都會覆蓋前一個元素。下面是我的代碼：

detail.html：

<ion-view view-title="DetailPage"> 
     <ion-content> 
      <h4> 
       Product Details 
      </h4> 
      <ion-view view-title="playlists"> 
       <ion-content> 
        <input type="button" ng-click="addToCart();" value="add cart" /> 
       </ion-content> 
      </ion-view> 

Controller.js：

.controller('detailsCtrl', function($scope, $stateParams) { 

     var productname = $stateParams.playlistname; 
     var arr = []; 
     $scope.addToCart = function() { 
      arr.push(productname); 
      localStorage.setItem('arr', arr); 


     }) 

如何處理元素的覆蓋？

Answer 1

您正在重新初始化陣列，然後將新陣列寫入本地存儲。您需要從本地存儲中檢索現有陣列，然後將元素推送到它：

.controller('detailsCtrl', function($scope, $stateParams) { 

     var productname = $stateParams.playlistname; 
     // Get the product array from local storage if it exists 
     // or initialise a new array. 
     var arr = localStorage.getItem('arr') || []; 
     $scope.addToCart = function() { 
      arr.push(productname); 
      localStorage.setItem('arr', arr); 


     })