Question

我有ng-repeat重复无序列表。该列表中的每个项目都有一个按钮，该按钮调用AngularJS函数将该项目添加到另一个列表。问题是传递给函数的项目是通过引用。这意味着，如果我更新该函数中的属性，那么该对象将在我的站点中的任何位置更新。

我的问题示例： http://jsfiddle.net/XyUGE/156/

您会看到左侧列表也已更新。但我只想更新传递给函数的对象！所以，我只想看到第二个列表中的更改。

我该如何解决这个问题？

Answer 1

在JavaScript中，所有内容都按值传递。您只是修改引用指向的对象。

您可以使用<script type="text/javascript"> $(document).ready( function() { $('#chat').keypress(function(e) { if(e.keyCode==13) $('#send').click(); }); $('#send').click(function() { var dt = new Date(); var msg= $('#chat').val() + ';' + dt.getHours()+':' + dt.getMinutes(); $('#chat').val(""); $('#convers').append(msg + "\n"); $.post("chat.php", { name: "nickname", messaggio: msg }, function(data,status) { alert("Data: " + data + "\n Status: " + status); }); }); }); </script>创建一个复制了顶级引用的新对象。

我添加了

angular.copy

http://jsfiddle.net/XyUGE/157/

Answer 2

原生方法（仅限复制对象，子功能）

var obj = { a : 1, b : 'str', c : function(){ return true; }};
// Deep
var newObject = Object.create(obj);

残酷的方法（没有功能，不是循环的）

// Deep
var newObject = JSON.parse(JSON.stringify(obj));

角度方法

var newObject = angular.copy(obj);
// or
angular.copy(obj, newObject);

Jquery方法

// Shallow copy
var newObject = jQuery.extend({}, obj);

// Deep copy
var newObject = jQuery.extend(true, {}, obj);

下划线方法

// Shallow
var newObject = _.clone(obj);

lodash方法

// Deep
var newObject = _.clone(obj, true);

不要在AngularJS函数中通过引用传递对象

2 个答案: