2016-10-05 6 views
0

Я работаю над динамической формой, которая генерирует несколько Div. Я хотел бы определить, был ли фокус потерян от всего div не только от одного входа.Как определить, когда фокус находится вне Div?

enter image description here

Как показывает картина, у меня есть несколько одинаковых форм, проблема здесь в том, как обнаружить, если пользователь закончит редактирование одной из форм?

Формы создаются динамически, используя 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) потеряла фокус, чтобы выполнить функцию. Спасибо.

+0

Угловая api имеет основные директивы для большинства событий.Возможно также рассмотреть возможность отключения другой формы, в то время как каждый из них грязный и не сохранен. – charlietfl

+0

ngMouseleave не будет полезен в этом случае, также мне нужно несколько форм, потому что пользователь может добавить столько записей, сколько захочет, и после каждой модификации формы мне нужно отправить ее данные на сервер, поэтому я хочу обнаружить событие потери фокуса. –

ответ

0

я установил проблему с помощью скрытого ввода, который указывает индекс формы, значение этого входа добавить к модели, потому что, 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 

    } 

}

Это не идеальное решение, но это работает просто отлично.

1

На основании вашей проблемы, лучшим решением является использование 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); 
+0

. Спасибо. Artem работает для полей ввода, но проблема здесь, чтобы проверить, перешли ли мы в следующую форму или нет, потому что, если мы перейдем к следующей форме, необходимо сохранить предыдущий в базе данных, чтобы сократить время ожидания запросов. Мы не уверены, что пользователь отредактирует все существующие формы, поэтому, когда он редактирует, мы вызываем WS и обновляем базу данных. –

+0

В одной форме я предполагаю, что вы имеете в виду горизонтальную строку полей. Я понимаю вашу дилемму. Сложность решения зависит от того, сколько строк вы ожидаете. Имея разумный объем данных, я ранее просто отправил все данные через API и обновил все записи во всех случаях, когда обнаружено изменение. Применил концепцию как «набор» вместо «обновления». –