LocalStorageはオブジェクトを格納するために2回起動します

Question

オブジェクトをLocalStorageに格納しようとしていますが、私がsetItemをトリガーすると、2つのオブジェクト（複製）が格納されます。以下は私のコードです。

.controller("ProjectAddCtrl", function($scope) { 

    $scope.addProject = function (projectInfo) { 

     var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || []; 

     $scope.projects = [{ 
     name: "", 
     host: "", 
     instance: "" 
     }]; 

    oldItems.push(projectInfo); 
    localStorage.setItem('itemsArray', JSON.stringify(oldItems)); 

}; 

    $scope.removeProject = function() { localStorage.clear(); }; 

    console.log(JSON.parse(localStorage.getItem('itemsArray'))); 


}) 

Answer 1

HTML

<form class="clearBoth" ng-submit="addProject(projectInfo)"> 
     <div class="list" ng-model="projectInfo"> 
      <label class="item item-input item-stacked-label"> 
       <span class="input-label">Project Name</span> 
       <input type="text" ng-model="projectInfo.name" placeholder="PSN" required> 
      </label> 


      <label class="item item-input item-stacked-label"> 
       <span class="input-label">Host</span> 
       <input type="text" ng-model="projectInfo.host" placeholder="http://psn.com.my" required> 
      </label> 

     <label class="item item-input item-stacked-label"> 
      <span class="input-label">Instance</span> 
      <input type="text" ng-model="projectInfo.instance" placeholder="PSN" required> 
     </label> 

     </div> 


     <button class="button button-block button-positive" ng-click="addProject(projectInfo)">Block Button</button> 
     <button class="button button-block button-assertive" ng-click="removeProject()">Block Button</button> 
    </form> 

コントローラは<form>上<button>とng-submitの両方ng-clickがトリガされ、したがって、あなたは二度追加され、同じデータを見ています。最初のボタンにtype="button"属性を追加して修正できます。

チェックdocumentation - type属性のデフォルト値は両方とも、submitひいてはでclickとsubmitのイベントが解雇されています。