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

Question

有没有一种方法可以在模型本身上检查脏标志，而不依赖于视图？

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

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

我可以在每个输入上添加名称和ng-form属性，以使其在控制器中可识别为表单，但那样我就会得到一个与视图强耦合的控制器。

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

我查看了监视特定字段的原始/脏表单状态和AngularJS：用于ng-check已选输入的$pristine

- CodeToad

---

你是指使用 $watchers 吗？https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch 也许我错过了更具体的内容。你能澄清一下吗？ - Antiga

观察者会在每次更改时触发事件。我正在寻找一种检查方法，在保存操作期间检测已更改的值，以便仅将这些值发送到服务器。这与$pristine相同，但不需要为每个变量单独创建表单，这是非常重要的。 - CodeToad

Answer 1

我能想到的一个选择是

1. As you get a model/object from service, create a replica of the model within the model and bind this new model to your view.

2. Add a watch on the new Model and as the model changes, use the replica to compare old and new models as follows

   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]
           }
         }
       }
     }
   }
   

- Mothupally

---

感谢提供完整的代码示例。这基本上就是我在问题中提到的第二个选项所描述的内容。除非有更具说服力的解决方案，否则我将使用这种方法。 - CodeToad

欢迎 Toad。别忘了打勾选答案 :) - Mothupally

你可能想要检查 hasOwnProperty(prop) 来避免枚举原型属性。如果 (oldData.hasOwnProperty(prop)){ //处理你的业务... } - dball

Answer 2

您可能会发现，将对象的JSON表示存储起来，然后与之后进行比较，比循环遍历各种属性更容易。

请参见使用AngularJS检测未保存的数据。

- Philip Callender

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

- Philip Callender