Angularjs向数组添加新数据

我想将新数据添加到数组变量中，但事实是，新数据会插入它以覆盖现有数据。我需要修复？Angularjs向数组添加新数据

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

我必须解决它？我是否需要将新数据添加到变量中数组不会覆盖原始数据。

来源

2017-06-14 MaTaDoRcpe

您是否试图清空现有阵列并推送新数据？你能否修正你的语法并使其可以理解。 –

我创建了一个变量数组1.当按下按钮时，把你的值放在数组中。 – MaTaDoRcpe

既不能理解你的问题，也不能理解你的评论。请具体 –

你原来值覆盖掉了，由于数组的浅表副本。其实当我们用“=”的分配，新变量和旧变量指向相同的内存位置，因此如果修改其中一个，其他值的值也会被修改。下面用使用angular.copy（源，目的地）深拷贝 - -

解决这个

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

请检查该copy-and-assignment联系了解更多详情。希望这有助于。

来源

2017-06-14 05:22:15

非常感谢您帮助我我可以做到这一点 – MaTaDoRcpe

你需要做一个对象的深层副本，因为arrInput通过引用传递给$ scope.addData！更改$ scope.addData到：

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

这里是我的示例简化：https://jsfiddle.net/AKMorris/occysaa1/

来源

2017-06-14 05:04:05 AKMorris

非常感谢您的帮助我可以做到 – MaTaDoRcpe

Angularjs向数组添加新数据

回答

相关问题