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

我必须修理它吗？我是否需要将新数据添加到变量中Array不会覆盖原始数据。

Answer 1

您需要制作对象的深层副本，因为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/

Answer 2

由于数组的浅拷贝，你的原始值会被覆盖。实际上，当我们使用'='进行赋值时，新变量和旧变量引用相同的内存位置，因此如果你修改一个，则其他的值将会也得到修改。

解决方法 - 使用angular.copy（源，目标）进行深层复制，如下所示 -

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

请查看此copy-and-assignment链接了解详情。希望这会有所帮助。

Angularjs向数组添加新数据

2 个答案: