Ng-repeat по свойствам объекта, но дефокусирует поле ввода после ввода
Я использую ng-repeat для привязки элементов формы к свойствам настраиваемого объекта, который у меня есть, например:
$scope.myObject = {
'font-size': 10,
'text-outline-width': 2,
'border-color': 'black',
'border-width': 3,
'background-color': 'white',
'color': '#fff'
}
HTML:
<div ng-repeat='(key, prop) in myObject'>
<p>{{key}} : {{prop}}</p>
<input type='text' ng-model='myObject[key]'>
</div>
Однако каждый раз, когда я пытаюсь ввести значение в поле ввода, текстовое поле отменяется, и я должен повторно выбрать его, чтобы продолжать печатать.
Есть ли другой способ сделать это двустороннее связывание с объектом, чтобы я мог свободно вводить?
Вот JSFiddle:
http://jsfiddle.net/AQCdv/1/
Ответы
Ответ 1
Вводы причин были не сфокусированы, так это то, что Angular перестроил DOM при каждом изменении myObject. Вы можете специально указать ng-repeat для отслеживания по ключу, поэтому нежелательного поведения не произойдет. Кроме того, для версии 1.1.5 потребуется более новая версия библиотеки:
function MyCtrl($scope) {
$scope.myObject = {
'font-size': 10,
'text-outline-width': 2,
'border-color': 'black',
'border-width': 3,
'background-color': 'white',
'color': '#fff'
}
}
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat='(key, prop) in myObject track by key'>
<p>{{key}} : {{prop}}</p>
<input type='text' ng-model='myObject[key]'>
</div>
</div>
Ответ 2
это можно решить с помощью директивы. Я создал директиву под названием customBlur, но ее можно назвать любым, что вам нужно, если она соответствует вашему HTML. Посмотрите скрипку здесь: http://jsfiddle.net/AQCdv/3/
angular.module('app', []).directive('customBlur', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attr, ngModelCtrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return; //ignore check boxes and radio buttons
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
};
});
и директива HTML, которая будет использоваться как
<input type='text' ng-model='myObject[key] ' custom-blur>
То, что эта директива делает, - это отменить события, которые производят обновления модели, которые заставляют ваше текстовое поле терять фокус. Теперь, когда текстовое поле теряет фокус (событие размытия), модели обновляются.
