AngularJS：检查模型值是否已更改

Question

有没有办法检查模型本身的脏标志，与视图无关？

我需要角度控制器来知道哪些属性已被更改，以便仅将已更改的变量保存到服务器。

我已经实现了关于我的整个表单是脏还是原始的逻辑，但这不够具体

我可以在每个输入上打一个名字和ng-form属性，使其在控制器中被识别为一个表单，但最后我得到一个与视图强耦合的控制器。

另一个不太吸引人的方法是将每个输入绑定的初始值存储在单独的对象中，然后将当前值与初始值进行比较以了解它们是否已更改。

我检查了Monitor特定字段的pristine / dirty form状态和AngularJS：$ pristine for ng-check checked inputs

Answer 1

我能想到的一个选择是

1. 从服务中获取模型/对象时，在模型中创建模型的副本，并将此新模型绑定到视图。

2. 在新模型上添加监视，并在模型更改时，使用副本比较新旧模型，如下所示

    var myModel = { property1: "Property1", property2: "Property2", array1:["1","2","3"] } var getModel = function(myModel){ var oldData = {}; for(var prop in myModel){ oldData.prop = myModel[prop]; } myModel.oldData = oldData; return myModel; } var getPropChanged = function(myModel){ var oldData = myModel.oldData; for(var prop in myModel){ if(prop !== "oldData"){ if(myModel[prop] !== oldData[prop]){ return{ propChanged: prop, oldValue:oldData[prop], newValue:myModel[prop] } } } } } 

Answer 2

您可能会发现最容易存储并稍后与对象的JSON表示进行比较，而不是循环遍历各种属性。

请参阅使用angularjs检测未保存的数据 。

Answer 3

下面显示的类可能适用于您的目的，并且可以跨页面轻松重用。

在加载模型时，您会记住它们的原始值：

    $scope.originalValues = new OriginalValues();

    // Set the model and remember it's value
    $scope.someobject = ...
    var key = 'type-' + $scope.someobject.some_unique_key;
    $scope.originalValues.remember(key, $scope.someobject);

稍后您可以确定是否需要使用以下方法保存：

    var key = 'type-' + $scope.someobject.some_unique_key;
    if ($scope.originalValues.changed(key, $scope.someobject)) {
       // Save someobject
       ...
    }

该键允许您记住多个模型的原始值。 如果您只有一个ng-model，那么键可以只是'model'或任何其他字符串。

假设在查找更改时应忽略以“$”或“_”开头的属性，并且UI不会添加新属性。

这是类定义：

function OriginalValues() {
    var hashtable = [ ]; // name -> json

    return {

      // Remember an object returned by the API
      remember: function(key, object) {
        // Create a clone, without system properties.
        var newobj = { };
        for (var property in object) {
          if (object.hasOwnProperty(property) && !property.startsWith('_') && !property.startsWith('$')) {
            newobj[property] = object[property];
          }
        }
        hashtable[key] = newobj;
      },// remember

      // See if this object matches the original
      changed: function(key, object) {
        if (!object) {
          return false; // Object does not exist
        }

        var original = hashtable[key];
        if (!original) {
          return true; // New object
        }

        // Compare against the original
        for (var property in original) {
          var changed = false;
          if (object[property] !== original[property]) {
            return true; // Property has changed
          }
        }
        return false;
      }// changed

    }; // returned object
  } // OriginalValues