2016-04-27 15 views
0

オブジェクトをループするng-repeatがあり、以下の例のように文字列と入力フィールドのリストを表示します。これらの入力フィールドのリアルタイム検証を設定する必要があります。入力フィールドは、バーコード文字列と等しくなければなりません。バーコード文字列と等しくない文字列を入力すると、バーコード文字列と同じで入力フィールドをクリアする必要があります。これは角度で可能ですか?私はjQueryと同様のタスクを達成しました。この検証を達成するためにjQueryとAngularを組み合わせることはできますか?私はangular.jsで新しいですので、どんな助けも大歓迎です。入力フィールドがangular.jsの別の変数と一致するかどうかをリアルタイムでチェックする方法

HTML:

<div ng-repeat="(index, val) in barcodes.barcodes track by $index"> 
    <div class="form-group row" ng-show="barcodes.barcodes[index]"> 
    <label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.adaptors[$index] }} </label> 
    <label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.barcodes[index] }} </label> 
    <div class="col-sm-6"> 
     <input type="email" class="form-control" placeholder="Barcode"> 
    </div> 
    </div> 
</div> 

例バーはオブジェクト:

var bars = { 
    "adaptors": ["506-704", "505-703", "503-702", "508-701", "507-705", "502-706", "504-707", "501-708"], 
    "barcodes": ["11-11-1111","11-11-2222","11-11-3333","11-11-4444","X","X","X","X"]; 
} 

enter image description here

+0

あなたのエラーメッセージにご入力して[NG-IF](https://docs.angularjs.org/api/ng/directive/ngIf)にngModelを使用すると、実」のために働くだろう時間"。しかし入力フィールドをリアルタイムでクリアすることはできません。すぐに入力を開始するとすぐに等しくないので、すぐにクリアされるからです。 ngchange/ngblurのように、ユーザーの入力が完了するまで待つ必要があります。 –

+0

私はこの問題を認識しています、私はタイマーを使用することを考えていました..多分400ms ..しかし、本質的に私の問題ではありません。私のユーザはバーコードスキャナを使用してこの入力フィールドに入力します。 – webDevleoper101

答えて

1

あなたはリアルタイムをしたい場合は...ウォッチャーは、あなたが探しているものかもしれ。しかし、ウォッチャーは効率的ではありません。

ng-changeディレクティブを使用するのが最善の方法です。このようにして、ユーザーがタイプするたびに、ng-change指示に渡された関数がトリガーされます。これにより、関数内のロジックを処理し、必要に応じて反応させることができます。

https://docs.angularjs.org/api/ng/directive/ngChange

関連する問題