Angularjs push to array w usłudze zastępuje poprzednie pozycje

Question

Próbuję dodać do listy w home.html i wyświetlić listę w myOrders.html przy użyciu ionic i angularjs.

Problem polega na tym, że po naciśnięciu nowego elementu do tablicy poprzednie pozycje zostaną zastąpione nowym elementem.

przykład:

dostarczania 'jeden' -> tablica jest [{ 'Nazwa': jedna '}]

Push 'dwóch' -> tablica jest [{' Nazwa ' 'two'}, {'name': 'two'}] // powinno być [{'name': 'one'}, {'name': 'two'}}]

naciśnij "trzy" - > array to [{'name': 'three'}, {'name': 'three'}, {'name': 'three'}] // powinno być [{'name': 'one'} , {'name': 'two'}, {'name': 'three'}]

Dodałem odpowiednie części mojego kodu poniżej.

home.html (Dodaj do listy)

<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 (lista wyświetlanych)

<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

Wstawiasz ten sam obiekt raz po raz do tablicy. Ponieważ obiekty są zawsze przekazywane przez referencję, odwołanie do tego samego obiektu jest przekazywane do tablicy. Po zaktualizowaniu obiektu wszystkie odwołania przechowywane w tablicy ulegają zmianie.

Spróbuj coś jak tworzenie kopii obiektu, przechodząc do updateForm()

.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"); 
      } 
     }; 
    })