Question

我正在处理角度1，创建一个组件，它将有2个按钮ADD和Remove。在ADD上单击它应该将一个新对象推送到该数组。当我单击ADD时，行正确创建，但如果再次单击ADD，它将复制上一个对象，而不是创建一个。

在组件中我需要发送一个对象数组，以及我想要推送的数组模式（推送到另一个项目时数组结构相似）。

https://plnkr.co/edit/zI3MdoqyBjGcXd30hPsS?p=preview

代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.itemsObj = [{
    id: 1,
    name: 'JayZ'
  }, {
    id: 2,
    name: 'Mc'
  }]

  $scope.pushItem = {
    id: null,
    name: null
  }
});

app.component('addRemoveRow', {
  templateUrl: './addRemoveRow.html',
  bindings: {
    pushObj: "<",  // we pass here objects structure ( given pattern )
    index: "<",  // this is the index of the array
    obj: "=" // this is the list of the items where we push pushObj
  },
  controller: function($timeout) {
    var ctrl = this;

    ctrl.$onChange = function(value) {
      console.log(value);
      ctrl.obj = ctrl.obj;
    };

    ctrl.addRow = function(event) {
      console.log(ctrl.pushObj);
      ctrl.obj.push(ctrl.pushObj);
    };

    ctrl.deleteRow = function(event) {
      ctrl.obj.splice(ctrl.index, 1);
    };
  }
});

HTML：

<div>
    <button class="btn btn-xs btn-success mb10 block"
        ng-click="$ctrl.addRow($event)">
        ADD
    </button>
    <button class="btn btn-xs btn-danger mb10 block"
        ng-show="$ctrl.obj.length > 1"
        ng-click="$ctrl.deleteRow($event)">
        Remove
    </button>
</div>

为了更好地理解我的意思，在plunker中，添加一行，在输入中键入内容，然后添加另一行，当您添加新行时，它看起来与之前不应该相同。它应该与pushObj中的给定模式匹配

Answer 1

每次将对象推入数组时，都会传递对象的引用。那就是为什么将相同的引用放入数组元素中。一旦它的属性发生变化，它将反映出它的参考位置。

您应该在使用angular.copy推送内部数组之前克隆该对象（克隆对象将有新的引用）。

ctrl.obj.push(angular.copy(ctrl.pushObj));

Demo Plunkr

组件复制上一个对象，而不是从给定模式

1 个答案: