NG-重复的对象属性，但键入后失焦，输入框 [英] ng-repeat on object properties but defocuses input box after typing

问题描述

我使用 NG-重复绑定的表单元素我有，例如自定义对象的属性：

  $ scope.myObject = {
            字体大小：10，
            文本轮廓宽度：2，
            边框颜色：黑，
            边框宽度：3，
            背景颜色：白色，
            '颜色'：'#FFF
    }
 

HTML

 ＆LT; D​​IV NG重复='（键，道具）在myObject的'＆GT;
    ＆LT; P＆GT; {{键}} {{道具}}＆LT; / P＆GT;
    ＆LT;输入类型='文本'NG-模式='myObject的[关键]'＆GT;
＆LT; / DIV＆GT;
 

不过，每次我试着输入一个值在输入框中时，文本框会取消，我不得不重新选择它来保持打字。

有另一种方式来做到这一点的双向绑定到一个对象，这样我可以自由输入？

下面是的jsfiddle：
http://jsfiddle.net/AQCdv/1/

解决方案

输入是重点不突出的原因是，角重建每一个myObject的改变DOM。您可以明确指示NG-重复者皆跟踪，所以不期望的行为不会发生。此外，这将需要在1.1.5库更新版本：

\r

\r

函数MyCtrl（$范围）{\r
  $ scope.myObject = {\r
    字体大小：10，\r
    文本轮廓宽度：2，\r
    边框颜色：黑，\r
    边框宽度：3，\r
    背景颜色：白色，\r
    '颜色'：'#FFF\r
  }\r
}

\r

＆LT;脚本SRC =HTTP：//$c$c.angularjs。组织/ 1.1.5 / angular.min.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV NG-NG应用程序控制器=MyCtrl＆GT;\r
  ＆LT; D​​IV NG重复='（键，道具）在myObject的轨道通过按键'＆GT;\r
    ＆LT; P＆GT; {{键}} {{道具}}＆LT; / P＆GT;\r
    ＆LT;输入类型='文本'NG-模式='myObject的[关键]'＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

更新拨弄。

I am using ng-repeat to bind form elements to the properties of a custom object I have, example:

 $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>

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/

解决方案

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:

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>

Updated fiddle.

这篇关于NG-重复的对象属性，但键入后失焦，输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！