Angularjs fügen neue Daten zum Array hinzu

Question

Ich möchte die neuen Daten in die Array-Variable hinzufügen, aber die Sache ist, die neuen Daten werden eingefügt, um vorhandene Daten zu überschreiben bereits vorhanden. Ich muss reparieren?

HTML-Code:

<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-Code:

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

Ausgang: https://i.stack.imgur.com/4MtBx.png

Ich habe es zu beheben? Muss ich tun, um neue Daten in Variablen hinzuzufügen Array wird das Original nicht überschreiben.

Answer 1

Ihre ursprüngliche Wert wird immer aufgrund flache Kopie des Arrays .Actually überschrieben, wenn wir für die Zuweisung ‚=‘ verwenden Die neue Variable und die alte Variable beziehen sich auf den gleichen Speicherort. Wenn Sie also einen ändern, wird auch der Wert des anderen geändert.

Lösung für diese - verwenden tiefe Kopie angular.copy (Quelle, Ziel) wie unten -

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

Bitte überprüfen Sie diese copy-and-assignment Link für weitere Details. Hoffe, das hilft.

Answer 2

Sie müssen eine tiefe Kopie des Objekts erstellen, da arrInput per Verweis an $ scope.addData übergeben wird !! Ändern $ scope.addData zu:

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

Hier ist ein Beispiel, das ich vereinfacht: https://jsfiddle.net/AKMorris/occysaa1/