javascript - 属性应用于所有项目而不只是当前项目？

Question

我正在使用 AngularJS 并尝试记录各种项目的独特色调。我有一组项目和一组颜色:

$scope.item = [
  {name:"Toy Car", colors:[]},
  {name:"Toy Boat", colors:[])
];

$scope.colors = [
  {id:"Red", intensity:256},
  {id:"Green", intensity:256},
  {id:"Blue", intensity:256}
];

我有一个输入可以让我改变每种颜色的强度。当我单击“应用”按钮时，颜色[] 被复制到项目数组[0].colors 中。

<input type='number' ng-model='colors[0].intensity'> //repeat for each color RGB
<button ng-click='apply()'>APPLY</button>

$scope.apply = function(){
  $scope.color_this = angular.copy($scope.colors, $scope.color_this);
  $scope.item[0].colors = angular.copy($scope.color_this, $scope.item[0].colors);
  $scope.color_this = []; // blank array to make room for the next RGB mix
};

在我转到下一个 $scope.item[1].colors 之前，这一直很好用。当我尝试设置 $scope.item[1] 的下一个颜色时，前一个项目的颜色也会被覆盖。即:

$scope.item[0].colors === $scope.item[1].colors // evaluates to true

但我不想要这个!我希望每个项目都能够保持自己独特的颜色。我的逻辑有什么根本性的错误吗？为什么以前的项目颜色会被覆盖？？

Answer 1

在我看来，它似乎与 Javascript 数组的深度复制问题有某种关系。我建议跳过 angular.copy() 的第二个参数。在此处查看文档 https://docs.angularjs.org/api/ng/function/angular.copy

像这样的……

$scope.apply = function(){
  $scope.color_this = angular.copy($scope.colors);
  $scope.item[0].colors = angular.copy($scope.color_this);
  $scope.color_this = []; // This line is not needed since copy will create a new array each time, so you can remove this
};

试试吧。