4

私は自分のフォームで次のようにコーディングしました：

<td><input type="text" ng-model="row.title" /></td>

Chrome 開発者ツールで DOM を見ると、次のように表示されます。

<input type="text" ng-model="row.title" class="ng-pristine ng-valid">

入力に変更が加えられたときに、入力にクラスが追加されるようにするにはどうすればよいですか?

4

3 に答える 3

11

この問題にアプローチするには、次の 2 つの方法があります。

ng-dirty1. Angular が要素に配置する組み込みクラスを使用します。

Angular によって管理される入力を変更すると、さまざまな状態の入力にいくつかの CSS クラスが追加されます。これらには以下が含まれます：

  • ng-pristine- 入力は変更されていません
  • ng-dirty- 入力が変更されました

.ng-dirtyそのため、クラスに基づいて CSS を変更できれば、問題ありません。

2.フラグform付きのディレクティブを使用します。$dirty

要素を使用するとform、Angularはフォームの属性と同じ名前のFormControllerインスタンスをスコープに割り当てます。nameフォーム内の各入力は、その FormController インスタンスにプロパティとしてアタッチさnameれ、入力の属性と同じ名前になります。例えば、

<form name="myForm">
  <input type="text" name="myInput">
</form>

あなたにあげる

$scope.myForm.myInput

各入力プロパティには、 や などの独自の$pristineプロパティがいくつかあり$dirtyます。これらは、上記の CSS クラスと同じように機能します。したがって、$dirty入力のフラグを確認し、ng-class条件付きで要素にクラスを適用するために使用できます。例：

<div ng-controller="MainController">
  <form name="myForm">
    <input name="myInput" ng-model="model" ng-maxlength="3"
      ng-class="{changed: myForm.myInput.$dirty}">
  </form>
</div>

ここで実際の例を見つけることができます: http://jsfiddle.net/BinaryMuse/BDB5b/

于 2013-07-15T07:36:55.280 に答える
1

このjsfiddleを見てください：http://jsfiddle.net/hNrEV/2/

主なアイデアは$scope.$watch、入力ボックスへの変更を監視するために使用することです。の ID を指定し、への変更を監視するrowTitleというディレクティブを使用し、入力ボックス内のテキストが「間違ったタイトル」に等しい場合は常にテキストを赤く着色するクラス「赤」を追加します。watchRowTitle$scope.row.title

ディレクティブで DOM 操作を行うことはおそらく良い習慣です。ここで、watchRowTitleディレクティブは 4 つのキーを持つオブジェクトを返します。

  • templatewatch-row-title -タグを置き換える html 。ここではこれは必要ありません
  • スコープ- ここでは、分離スコープを使用します。scope.title基本的に、「=」は、watch-row-titleディレクティブ内とコントローラー$scope.row.title内の値の間で双方向のデータ バインディングを確立します。MyCtrl
  • 制限-E要素を表す の値を指定します。したがって、これにより、watch-row-titlehtml タグ内でのディレクティブの使用が制限されます。つまり、次のようになります。<watch-row-title></watch-row-title>
  • link - これは興味深いことが起こるリンク機能です。ここでは、 on を使用scope.$watchしtitleます。監視対象の変数の新しい値と古い値を保持する 2 つのパラメーターnewValueとoldValue(別の名前を付けることもできますが、この方法で名前を付ける方がより意味があります) を持つ関数を提供する必要があります。変数が文字列 'wrong title' になるたびにscope.title、CSS クラス 'red' が id の入力ボックスに追加されますrowTitle(入力ボックスのテキストが赤くなることに注意してください)。それ以外の場合は、その CSS クラスを削除します。この部分は JQuery を使用して行われます。

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
    <input id="rowTitle" type="text" ng-model="row.title" class="ng-pristine ng-valid" />
    <watch-row-title title="row.title"></watch-row-title>
</div>

CSS:

.red {
    color: red;
}

JavaScript:

angular.module('myApp', [])
    .controller('MyCtrl', [
        '$scope',
        function ($scope) {
            $scope.row = {};
        }
    ])
    .directive('watchRowTitle', [
        function () {
            return {
                template: '',
                scope: {
                    title: '='
                },
                restrict: 'E',
                link: function(scope, element, attr) {
                    scope.$watch('title', function(newValue, oldValue) {
                        if (newValue === 'wrong title') {
                            $('#rowTitle').addClass('red');
                        } else {
                            $('#rowTitle').removeClass('red');
                        }
                    });
                }
            };
    }
]);
于 2013-07-15T07:12:10.507 に答える