Angularjs Push-to-Array im Dienst ersetzt vorherige Elemente

Question

Ich versuche, zu einer Liste in einer home.html hinzufügen und zeigen Sie die Liste in myOrders.html mit ionic und angularjs.

Das Problem ist, dass, wenn ich ein neues Element auf das Array schieben, die vorherigen Elemente durch das neue Element ersetzt werden.

Beispiel:

Push 'Eins' -> Array ist [{ 'name': ein '}]

push 'zwei' -> Array ist [{' name ': 'zwei'}, {'name': 'zwei'}] // sollte sein [{'name': 'one'}, {'name': 'zwei'}]

push 'drei' - > array ist [{'name': 'drei'}, {'name': 'drei'}, {'name': 'drei'}] // sollte [{'name': 'one'} sein , {'name': 'zwei'}, {'name': 'drei'}]

Ich habe die relevanten Teile meines Codes unten hinzugefügt.

home.html (In Liste)

<ion-view title="Home"> 
    <ion-content ng-controller="homeCtrl"> 
     <form ng-submit="submitForm(product)" class="list"> 
      <input ng-model="product.name" type="text"> 
      <input type="submit" value="Search" class="button"> 
     </form>   
    </ion-content> 
</ion-view> 

myOrders.html (Display-Liste)

<ion-view title="My Orders"> 
    <ion-content ng-controller="myOrdersCtrl"> 
     {{ product }} 
    </ion-content> 
</ion-view> 

controllers.js

angular.module('app.controllers', []) 
... 
.controller('homeCtrl', function($scope, $state, formData) { 
     $scope.product = {}; 

     $scope.submitForm = function(product) { 
      if (product.name) { 
       formData.updateForm(product); 
       $state.go('menu.myOrders'); 
      } else { 
       alert("Please fill out some information for the user"); 
      } 
     }; 
    }) 

.controller('myOrdersCtrl', function($scope, formData) { 
    $scope.product = formData.getForm(); 
}) 

services.js

angular.module('app.services', []) 

.service('formData', [function(){ 
    return { 
     form: [], 
     getForm: function() { 
      return this.form; 
     }, 
     updateForm: function(item) { 
      this.form.push(item); 
     } 
    } 
}]); 

Answer 1

Sie fügen dasselbe Objekt immer wieder in das Array ein. Da Objekte immer so übergeben werden, wird der Verweis auf dasselbe Objekt in ein Array geschoben. Wenn Sie das Objekt aktualisieren, werden alle im Array gespeicherten Referenzen geändert.

Probieren Sie etwas wie Kopie des Objekts erstellen, während zu updateForm() vorbei

.controller('homeCtrl', function($scope, $state, formData) { 
     $scope.product = {}; 

     $scope.submitForm = function(product) { 
      if (product.name) { 
       formData.updateForm(angular.copy(product)); 
       $state.go('menu.myOrders'); 
      } else { 
       alert("Please fill out some information for the user"); 
      } 
     }; 
    })