0

ユーザーが編集可能なフィールドを持つフォームがあります。それらのいくつかは、(ユーザーによって編集された) $dirty になるまで、提案された値で自動的に更新されます。

ユーザーが変更されたフィールドを確認できるように、この変更をマークします (入力の境界線をフラッシュするなど)。

フォームのすべての入力に対してこれを行うにはどうすればよいですか? (約 50 入力)。

例: テキスト入力があります

  • バツ
  • よ
  • 領域
  • 周囲。

ユーザーは通常、X と Y の値を入力します。これらのフィールドに $watch を設定し、Web サービス (/calculate?x=3&y=2) を呼び出して {perimeter: 12; } を返します。面積：6}。これらの値は、面積と周長の入力で自動補完されます。これが発生した場合、これらのフィールドに CSS クラスを追加して、ユーザーが自動的に更新された場所を認識できるようにします。

$watch に CSS クラスを追加できることはわかっていますが、複数のウォッチャーがあり、すでに複雑なフォームにこのロジックを追加したくありません。プログラムで変更された入力に対して機能し、多くの入力 (フォームのディレクティブ、またはモデルではなくフォーム フィールドの入力またはウォッチャーのディレクティブ) に適用できる「onchange」をどこに持つべきかという私の考え。

4

1 に答える 1

1

$dirty の場合、css クラスを入力フィールドに適用できます。

HTML:

<form name="myForm">
    ...
    ...    
    <input name="fieldName" type="text" ng-model="object.name" ng-class="{'dirty-field': myForm.fieldName.$dirty}">
    ...
    ...
</form>

CSS:

.dirty-field{
  border: 1px solid yellow;
}

アップデート：

わかりましたので、次のようなディレクティブを使用して、各入力の値が変更されたかどうかを確認できます。

指令：

.directive('changedField', function(){
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl){

        var originalValue;

        scope.$watch(function(){ 
          return ctrl.$modelValue; 
        }, function(value){
          originalValue = !originalValue ? value : originalValue;
          element.toggleClass('changed-field', originalValue !== value);
        });

      }
  };  
})

HTML:

<input changed-field name="fieldName" type="text" ng-model="object.name">

CSS:

.changed-field{
  border: 1px solid yellow;
}

楽しみ！

于 2015-10-09T20:05:29.943 に答える