javascript - AngularJS ngSubmit 仅脏字段

Question

我想知道是否有一种方法可以提交仅包含 $dirty 字段的表单，目前我正在使用 ng-change 手动将每个字段添加到请求中关于改变。但问题是，它的可重用性不太好。

在 form.html 中

<input name="status" id="status" ng-model="campaign.status" ng-change="change('status')">

在controller.js

$scope.updates = {};
$scope.change = function (field) {
    $scope.updates[field] = $scope.campaign[field];
};
Campaign.update({id: $scope.campaign.id}, $scope.updates).$promise.then(function () {
    // success
}, function () {
    //error
});

我正在寻找一种更好的方法来做到这一点，例如可能没有 updates 变量。

Answer 1

在我看来，您只想发送已更新的字段。我不太确定这样做的原因是什么，但如果您想要解决的问题只是提交更改的值，我想建议一种替代方法。

如果您可以使用像 lodash 或 underscore 这样的库，我的建议是在提交之前对原始副本和 $scope.campaigns 的当前实例进行比较。

原因如下:

• $scope.$watch 的监听器函数不够灵活，无法轻松用于创建 $scope.updates object 对象。

• 表单的 $dirty 状态会有点脆弱，因为 $dirty 属性要求您使用表单字段的 name 属性，而不是ng-model 属性的名称。这可能会导致命名冲突，并且往往不太便于移植或更新。

如果您使用 lodash，您可能会执行以下操作:

//as soon as you create $scope.campaign, copy it to $scope.original
$scope.original = angular.copy($scope.campaign);

//in your update function
$scope.updates = _.pick($scope.campaign, function(value, key, object){ return $scope.campaign[key] != $scope.original[key] });

Campaign.update({id: $scope.campaign.id}, $scope.updates).$promise.then(function () {
        // success
    }, function () {
        //error
    });

<小时/>