Angular - 对象似乎相互绑定但实际上并非如此

Question

我有一个编辑页面，用户可以在其中编辑系统中的文件，然后保存它。加载文件时，我从结果中创建了两个对象，一个绑定到视图，另一个我希望保留（在其原始状态）直到 "save" 被单击，然后用它与视图绑定对象，以查看是否进行了任何更改。

因此，当页面加载时，这是运行

$http.get('/api/files/' + $stateParams.id)
  .then(function (result) {
      vm.fileTemp = result.data;
      vm.fileTempCopy = result.data;

fileTempCopy 未被视图中或控制器中其他地方的任何内容触及或引用，保存方法除外，我在其中检查它们是否相似。但是不知何故，当我更改输入字段时，它们都会更新（就好像它们都被用作输入的 ng-model 一样）。

 if(vm.fileTemp === vm.fileTempCopy)//in save-function

永远为真，他们的字段完全一样

为什么会发生这种情况，我该如何解决？

Answer 1

使用赋值运算符，你实际上只是在引用原始数组。数组是引用类型。这意味着，它们实际上并不存储值，它们只存储对这些值的引用。您所做的是复制对内存位置的引用，这意味着对该位置内存的任何更改（包括删除元素）都将反映在两个数组中。

所以你会想要这样做：

  vm.fileTemp = angular.copy(result.data);
  vm.fileTempCopy = angular.copy(result.data);

Answer 2

这是检查对象 "value equality" 的一种非常基本的方法。

function isEquivalent(a, b) {
    // Create arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // If number of properties is different,
    // objects are not equivalent
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;
}

//After your update Outputs: false
console.log(isEquivalent(vm.fileTemp, vm.fileTempCopy));

Angular - 对象似乎相互绑定但实际上并非如此

Angular - Objects seem bound to eachother but arent

binding

angularjs