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

AngularJS : check if a model value has changed

本文关键字：是否 检查 模型 AngularJS      更新时间：2023-09-26

有没有办法检查模型本身的脏标志，独立于视图？

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

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

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

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

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

我能想到的一个选择是

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

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

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

下面

显示的类可能非常适合您的目的，并且可以轻松地跨页面重用。

加载模型时，请记住其原始值：

    $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
相关文章：