Question

我正在编写一个将数据PUT到API的编辑表单（user.html），但我想避免PUTting表单中的所有数据。我想把改变的项目PUT。

我在使用表单时看到过使用脏和原始的内容，但这适用于表单中的任何更改。我也看过使用ng-change，但我不想触发对一个元素的更改操作，只是表示更改的元素应该包含在PUT中。

有人找到了一种方法来表示只有已更改的输入字段吗？

Answer 1

如果您将输入放在form的{{1}}属性中，然后为输入提供name属性，您还可以访问输入的name属性。< / p>

$pristine

<div ng-controller="MyController">
  <form name="myForm">
    <input type="text" name="first" ng-model="firstName">
    <input type="text" name="last" ng-model="lastName">
  </form>
</div>

您可以使用app.controller('MyController', function($scope) { // Here you have access to the inputs' `$pristine` property console.log($scope.myForm.first.$pristine); console.log($scope.myForm.last.$pristine); });查看任何字段是否已更改，以及表单上每个输入属性的$scope.myForm.$pristine属性，以查看是否输入< / em>已经改变了。您甚至可以迭代$pristine对象（非输入字段对象的前缀为myForm的键）：

$

Answer 2

我经常发现，当允许用户更新设置/信息时，您会想要更多功能。如能够重置信息或取消编辑并还原。我知道这不是请求的一部分，但是当你考虑到这一点时，它会使其他事情变得更容易。

存储已保存的值并具有已编辑的值，您可以重置为保存的值，因为它们不会更改。然后你可以比较2来确定改变了什么。

工作示例：http://jsfiddle.net/TheSharpieOne/nJqTX/2/

查看控制台日志，了解在示例中提交表单时发生的更改。这是一个可以通过PUT轻松发送的对象。

function myCtrl($scope) {
    $scope.user = {
        firstName: "John",
        lastName: "Smith",
        email: "john.smith@example.com"
    };
    $scope.reset = function () {
        angular.copy($scope.user, $scope.edit);
    };
    $scope.submitForm = function(){
        console.log(findDiff($scope.user, $scope.edit));
        // do w/e to save, then update the user to match the edit
        angular.copy($scope.edit, $scope.user);
    };

    function findDiff(original, edited){
        var diff = {}
        for(var key in original){
            if(original[key] !== edited[key])
                diff[key] = edited[key];
        }
        return diff;
    }
}

注意：findDiff很简单，它假设两个对象具有相同的键，只有值已更改。我们复制对象，使它们不会成为对同一对象的2个引用，实际上是2个对象。

Answer 3

旧线程但是要建立在TheSharpieOne的答案上，你可能想要使用angular.equals而不是“===”检查是否相等，否则这对数组不起作用。

function findDiff(original, edited){
  var diff = {}
    for(var key in original){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }
    return diff;
}

Answer 4

您可以使用$scope.$watch('scopeVariable', function(oldValue, newValue)...)并构建一个仅包含与newValue s不同的oldValue的对象。

以下是关于$ watch的Angular文档的link。

Answer 5

建立ARN和TheSharpieOne的答案。如果您在项目中使用下划线，则可以采用此方法来查找对象数组中的差异。

function findDiff(original, edited){
    _.filter(original, function(obj){ return !_.findWhere(edited, obj); });
}

Answer 6

仅在提交事件中使用更改的值检索对象的简单方法：

var dirtyInput = $('#myForm .ng-dirty');
var change = {};

for (var i = 0; i < dirtyInput.length; i++) {
  change[dirtyInput[i].name] = dirtyInput[i].value;
}

Answer 7

向TheSharpieOne's answer添加更多内容。原始和编辑之间的差异也可能是由于编辑对象中添加了新字段。因此额外检查相同的

function findDiff(original, edited){
    var diff = {}
    for(var key in original){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }
    for(var key in edited){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }

    return diff;
}

如何表示AngularJS中哪些输入字段已更改

7 个答案: