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