javascript ng-repeat 在对象属性上，但在输入后散焦输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19392906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-repeat on object properties but defocuses input box after typing
提问by user1027169
I am using ng-repeatto bind form elements to the properties of a custom object I have, example:
我正在使用ng-repeat将表单元素绑定到我拥有的自定义对象的属性，例如：
$scope.myObject = {
'font-size': 10,
'text-outline-width': 2,
'border-color': 'black',
'border-width': 3,
'background-color': 'white',
'color': '#fff'
}
HTML:
HTML：
<div ng-repeat='(key, prop) in myObject'>
<p>{{key}} : {{prop}}</p>
<input type='text' ng-model='myObject[key]'>
</div>
However, every time I try to type in a value into the input box, the text box gets deselected and I have to reselect it to keep typing.
但是，每次我尝试在输入框中输入一个值时，文本框都会被取消选择，我必须重新选择它才能继续输入。
Is there another way to do this two-way binding to an object so that I can type freely?
有没有另一种方法可以对对象进行双向绑定，以便我可以自由键入？
Here is the JSFiddle: http://jsfiddle.net/AQCdv/1/
这是 JSFiddle：http: //jsfiddle.net/AQCdv/1/
回答by Klaster_1
The reason inputs were unfocused is that Angular rebuilt the DOM on every myObject change. You can specifically instruct ng-repeat to track by key, so undesired behavior won't happen. Also, this will require 1.1.5 on newer version of library:
输入没有重点的原因是 Angular 会在每次 myObject 更改时重建 DOM。您可以专门指示 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>回答by Ronnie
this can be solved with a directive. I created a directive called customBlurbut it can be called whatever you want, granted it matches in your HTML. View the fiddle here: http://jsfiddle.net/AQCdv/3/
这可以通过指令解决。我创建了一个名为的指令，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());
});
});
}
};
});
and the HTML directive to be used like
以及要使用的 HTML 指令，例如
<input type='text' ng-model='myObject[key] ' custom-blur>
<input type='text' ng-model='myObject[key] ' custom-blur>
What this directive does is unbind the events that produce the model updates which is causing your text field to lose focus. Now when the text field loses focus (blur event) the models are updated.
该指令的作用是取消绑定产生模型更新的事件，这会导致您的文本字段失去焦点。现在，当文本字段失去焦点（模糊事件）时，模型会更新。
