Divからフォーカスが外れていることを検出する方法は？

Question

私はいくつかのDivを生成する動的フォームに取り組んでいます。フォーカスが1つの入力だけでなくdiv全体から失われているかどうかを検出したいと思います。

絵が示すように

、私は複数の同一のフォームを持って、ここでの問題は、ユーザーがフォームのいずれかを編集して行われているかどうかを検出する方法ですか？

フォームは、ng-repeatを使用して動的に作成されます。

<fieldset data-ng-repeat="response in responces" ng-init="sectionIndex = $index" > 
    <div id="customFrom"> 
    <input type="text" ng-model="response.code" name="" placeholder="Code"> 
    <input type="text" ng-model="response.rank" name="" placeholder="{{ 'app.forms.responses.rank' | translate }}" > 
    <input type="text" ng-model="response.value" name="" placeholder="{{ 'app.forms.responses.value' | translate }}"> 
    <input type="text" ng-model="response.name" name="" placeholder="{{ 'app.forms.createQuiz.fields.name' | translate }}" class="labelTextQuestionCreation"> 
    <button class="remove" ng-click="removeResponse($index)" ng-show="deteteResponceOption">-</button> 
    </div> 
</fieldset> 

ユーザーがあるフォームから別のフォームにジャンプしたときにアクションを追加する最もよい方法は何ですか？関数を実行するためにフォーム（Div）がフォーカスを失ったときを検出する必要があります。 ありがとうございます。

Answer 1

IがNGリピートを用いI'amので、各行はそのており、このため、入力の値は、モデルに追加され、フォームのインデックスを示し、隠し入力を使用して問題を修正自分の範囲。さらに、ng-focusディレクティブを使用して、入力にフォーカスがあるかどうかをチェックし、フォーカスがある場合はgetSelectedElement（index）という関数を呼び出し、インデックスが変更されているかどうかを検証し、新しいインデックスにあります。データベースの行を更新/挿入します。ここでは解決のための私のコードは次のとおりです。

HTML

<fieldset data-ng-repeat="response in responces track by $index" ng-init="sectionIndex = $index"> 
    <div ng-model-options="{ updateOn: 'blur' }" > 
    <input type="text" ng-model="response.code" name="" placeholder="Code" ng-focus="getSelectedElement(sectionIndex)"> 
    <input type="text" ng-model="response.index" ng-init="response.index=sectionIndex" ng-value="sectionIndex" ng-focus="getSelectedElement(sectionIndex)" ng-show="false"> 
    <input type="text" ng-model="response.rank" name="" placeholder="{{ 'app.forms.responses.rank' | translate }}" ng-focus="getSelectedElement(sectionIndex)"> 
    <input type="text" ng-model="response.value" name="" placeholder="{{ 'app.forms.responses.value' | translate }}" ng-focus="getSelectedElement(sectionIndex)"> 
    <input type="text" ng-model="response.name" name="" placeholder="{{ 'app.forms.createQuiz.fields.name' | translate }}" class="labelTextQuestionCreation" ng-focus="getSelectedElement(sectionIndex)" > 
    <button class="remove" ng-click="removeResponse($index)" ng-show="deteteResponceOption">-</button> 
    </div> 
</fieldset> 

はJavaScript

$scope.getSelectedElement=function(index){ 
var oldIndex=$scope.responcesSelectedIndex;//Variable to watch, it gets updated when we gain focus. initially it has -1 as a value, and we gain focus on a field it gets updated 
if(oldIndex==-1){//-1 indicates that we are in the first element, no previous index, no need to do any thing just update the old index. 
    oldIndex=index; 
} 
$scope.responcesSelectedIndex=index;//Update the old index to be the current so when we call the function again we will have two index values, the new one (As a parameter) and the old one ($scope.responcesSelectedIndex) 
var newIndex=$scope.responcesSelectedIndex; 
    if(oldIndex!=newIndex){//Jumping to the new Form 
     console.log("Update or Create"); 
     //Do What You want Here 

    } 

}

これは完璧なソリューションではありませんが、それだけで正常に動作します。

Answer 2

あなたの問題に基づいて、最良の解決策はng-model-optionsです。

ngのモデルとの各要素は、以下の属性が必要になります。

ng-model-options="{ updateOn: 'blur' }" 

は次にようになります：NG-モデルオプションで

<input type="text" ng-model="response.code" name="" ng-model-options="{ updateOn: 'blur' }" placeholder="Code"> 

をするとき、モデルにのみ更新されますフォーカスはフォームフィールドで失われます。 $ watchステートメントは、モデルの更新時にのみ起動されます。

$ watchコールバックで、メイン配列の属性が変更された場合は、検証によってモデルを実行して、すべてのデータが書き込まれているかどうかを確認し、目的の関数の実行を続行できます。

$scope.$watch('responces', function (newVal, oldVal) { 
    // onBlur triggered an update to an attribute of **responces** 
    // run your input validation here 
}, true);