Как определить, когда фокус находится вне Div?

Question

Я работаю над динамической формой, которая генерирует несколько Div. Я хотел бы определить, был ли фокус потерян от всего 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'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-model-options="{ updateOn: 'blur' }" 

Тогда будет выглядеть следующим образом:

<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);