Angularjsのサービス中の配列へのpush toは前の項目を置き換えます

Question

私はhome.html内のリストに追加しようとしています。myOrders.htmlにionicとangularjsを使ってリストを表示しようとしています。

問題は、新しい項目を配列にプッシュすると、以前の項目が新しい項目に置き換えられるということです。

例：

プッシュ '1' - >配列である[{ 'name' の一 '}]

プッシュ '2' - >配列は[{である' 名前」： {'name'： 'one'}、{'name'： 'two'}]

プッシュ 'three' - 'two'}、{'name'： 'two'}] >配列は[{'name'： 'three'}、{'name'： 'three'}、 {'name'： 'three'}] //は である必要があります[{'name'： 'one'} 、{'name'： 'two'}、{'name'： 'three'}]

下記のコードの関連部分を追加しました。

home.html（リストに追加）

<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（表示リスト）

<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

同じオブジェクトを繰り返し挿入しています。オブジェクトは常に参照渡しであるため、同じオブジェクトの参照が配列にプッシュされます。オブジェクトを更新すると、配列に格納されているすべての参照が変更されます。

構文は、サービスを作成するために使用さ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"); 
      } 
     }; 
    })