如何使用angular js将对象添加到存储在本地存储中的数组中？

Question

我正在尝试使用角推功能，但它不工作。

我正在存储的表单值到本地存储每一个将与新的对象来替换旧的对象时...

我想串（或物体）添加到一个数组。

下面是我的HTML代码：

<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; 
    } 

}]); 

的数据将存储在本地存储

但每次我点击它覆盖数据按钮在我的本地存储中。

有谁知道如何做到这一点？

Answer 1

你要推的userArray后先清除用户对象

$scope. user = {}; 

这里是链接Jsfiddle demo

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