角度jsを使用してローカルストレージに格納された配列にオブジェクトを追加するにはどうすればよいですか？

Question

角度プッシュ機能を使用しようとしていますが、機能していません。

私は配列に文字列（またはオブジェクト）を追加したい...ローカルストレージに

を、それは新しいオブジェクトと古いオブジェクトを交換するたびに、フォームの値を格納しています。以下は

<form name="myForm" novalidate> 
    <p> Username:<br> 
     <input type="text" name="user" ng-model="user.user" required> 
     <span ng-show="myForm.user.$pristine"/> 
    </p> 
     <p>Email:<br> 
      <input type="email" name="email" ng-model="user.email" required> 
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
       <span ng-show="myForm.email.$error.required">Email is required.</span> 
       <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
      </span> 
     </p> 

      <p> PhoneNum:<br> 
       <input type="number" name="PhoneNum" ng-model="user.PhoneNum" required> 
       <span ng-show="myForm.PhoneNum.$pristine"></span> 
      </p> 
       <p>Address:<br> 
        <input type="text" name="address" ng-model="user.address" required> 
        <span ng-show="myForm.address.$pristine"></span> 
       </p> 
        <p>Password:<br> 
         <input type="Password" name="pass" ng-model="user.pass" required> 
         <span ng-show="myForm.pass.$pristine" /> 
        </p> 
         <p> 
          <input type="submit" ng-click="addItem(user)" ng-disabled="myForm.$invalid"> 
         </p> 

</form> 
<pre>user = {{user | json}}</pre> 
<table> 
{{userdata}} 
    <tr> 
     <td>user</td> 
     <td>Email</td> 
     <td>Phone</td> 
     <td>Address</td> 
     <td>Password</td> 
    </tr> 
    <tr ng-repeat="x in userArray"> 
     <td>{{x.user}}</td> 
     <td>{{x.email}}</td> 
     <td>{{x.PhoneNum}}</td> 
     <td>{{x.address}}</td> 
     <td>{{x.pass}}</td> 
    </tr> 
</table> 

が私のjsコードです：

var app = angular.module("myApp", ['ngRoute','ngStorage']); 
app.controller("userCtrl",['$scope','$localStorage','$log',function($scope,$localStorage,$log){ 
    $scope.userArray=[]; 
    $scope.userdata=$localStorage.data; 

    $scope.addItem=function(user){  
     //var current=$localStorage.data; 
     //$scope.userArray=userArray.concat(user); 
     $log.log($scope.userArray); 
     $scope.userArray.push(user); 
     $localStorage.data=$scope.userArray; 
     $scope.userdata=$localStorage.data; 
    } 

}]); 

データが格納されますローカルストレージ

しかし、毎回私はそれがデータを上書きする]ボタンをクリックしてください以下

は私のHTMLコードです私のlocalstorageに。

誰でもこの方法を知っていますか？

Answer 1

あなたは

$scope. user = {}; 

としてuserArrayでプッシュした後、最初のユーザーオブジェクトをクリアしなければならない。ここJsfiddle demo

$scope.addItem = function(user) { 
    $scope.userArray.push(user); 
    $scope.user = {}; 
    $localStorage.data = $scope.userArray; 
    $scope.userdata = $localStorage.data; 
}