如何使用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; 
}