36

API にデータを PUT する編集フォーム (user.html) に取り組んでいますが、フォーム内のすべてのデータを PUT することは避けたいと思います。変更された項目だけを PUT したいと思います。

フォームで作業するときにダーティとプリスティンの使用を見てきましたが、これはフォームの変更に適用されます。ng-change の使用も見ましたが、1 つの要素の変更に対してアクションをトリガーしたくありません。変更された要素を PUT に含める必要があることを示すだけです。

変更された入力フィールドのみを示す方法を見つけた人はいますか?

4

7 に答える 7

53

form入力を属性付きのに入れ、入力にname属性を与えると、入力のプロパティnameにもアクセスできます。$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かどうか$pristineを確認したり、フォームの各入力のプロパティのプロパティを使用して、その入力が変更されたかどうかを確認したりできます。オブジェクトを反復処理することもできmyFormます (入力フィールド以外のオブジェクトには、キーの前に が付きます$)。

angular.forEach($scope.myForm, function(value, key) {
  if(key[0] == '$') return;
  console.log(key, value.$pristine)
});
// first, true
// last, false
于 2013-09-05T16:46:40.353 に答える
8

古いスレッドですが、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;
}
于 2015-08-31T14:44:19.470 に答える
2

とは異なる$scope.$watch('scopeVariable', function(oldValue, newValue)...)のみを含むオブジェクトを使用および構築できます。newValueoldValue

$watch に関する Angular ドキュメントへのリンクを次に示します。

于 2013-09-05T16:40:24.627 に答える
1

ARN と TheSharpieOne の回答から構築します。プロジェクトでアンダースコアを使用している場合は、このアプローチを使用してオブジェクトの配列の違いを見つけることができます。

function findDiff(original, edited){
    _.filter(original, function(obj){ return !_.findWhere(edited, obj); });
}
于 2016-04-07T17:37:59.313 に答える
0

送信イベントで値が変更されたオブジェクトのみを取得する簡単な方法:

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

for (var i = 0; i < dirtyInput.length; i++) {
  change[dirtyInput[i].name] = dirtyInput[i].value;
}
于 2016-11-23T14:25:36.833 に答える