Angularjsは配列に新しいデータを追加します

Question

新しいデータを配列変数に追加したいのですが、新しいデータが挿入されて既存のデータが上書きされています。 修正する必要がありますか？

HTMLコード：

<ion-view title="แจ้งสัตว์เกิด" id="page4"> 
    <ion-content padding="true" class="has-header"> 
    <form id="page4-form3" class="list"> 
     <label class="item item-select" id="page4-select5"> 
     <span class="input-label">ประเภท</span> 
     <select name="selectCategory" id="selectCategory" ng-model="form.categoryID" ng-change="getType(form.categoryID)"> 
      <option ng-repeat="recordCategory in myDataArrayCategory" value="{{recordCategory.aCategory}}">{{recordCategory.aCategoryName}}</option> 
     </select> 
     </label> 
     <label class="item item-select" id="page4-select6"> 
     <span class="input-label">ชนิด</span> 
     <select name="selectType" id="selectType" ng-model="form.typeID"> 
      <option ng-repeat="recordType in myDataArrayType" value="{{recordType.aType}}">{{recordType.aTypeName}}</option> 
     </select> 
     </label> 
     <label class="item item-input" id="page4-input5"> 
     <span class="input-label">จำนวน</span> 
     <input type="number" ng-model="form.Amount" placeholder=""> 
     </label> 
    </form> 
    <button id="page4-button2" class="button button-positive button-block" ng-click="addData(form)">เพิ่ม</button> 
    <ion-list id="page4-list3"> 
     <ion-item id="page4-list-item4">Item</ion-item> 
    </ion-list> 
    <button id="page4-button3" class="button button-positive button-block">บันทึก</button> 
    </ion-content> 
</ion-view> 

JSコード：

angular.module('starter') 

.controller('addDataCtrl',function ($scope,$http) { 

    $scope.form = { 
    categoryID:'', 
    typeID:'', 
    Amount:'' 
    }; 

    $scope.arrData = []; 

    $scope.addData = function (arrInput) { 
    $scope.arrData.push(arrInput); 
    console.log($scope.arrData); 
    } 
}); 

出力：https://i.stack.imgur.com/4MtBx.png

私はそれを修正する必要がありますか？ 変数に新しいデータを追加する必要はありますか？配列は元の文字を上書きしません。

Answer 1

を我々は割り当てのために「=」を使用するときにあなたの元の値が.Actuallyによる配列の浅いコピーに上書きなっている。ここで

$scope.addData = function (arrInput) { 
    var tempObject = {}; 
    angular.copy(arrInput, tempObject); 
    $scope.arrData.push(tempObject); 
    console.log($scope.arrData); 
    } 

は、私は単純化した例であります新しい変数と古い変数は同じメモリ位置を参照します。したがって、あなたが1つを変更すると、他の値も変更されます。このため

ソリューション - 以下のようangular.copy（送信元、送信先）を使用して、深いコピーを使用 -

$scope.addData = function (arrInput) { 
var deepCopy= {}; 
angular.copy(arrInput, deepCopy); 
$scope.arrData.push(deepCopy); 
console.log($scope.arrData);} 

詳細については、このcopy-and-assignmentリンクをご確認ください。 これが役立つことを願っています。

Answer 2

arrInputが参照によって$ scope.addDataに渡されるため、オブジェクトの詳細コピーを作成する必要があります。変更$ scope.addDataへ：https://jsfiddle.net/AKMorris/occysaa1/