由网友(漂亮哥哥)分享简介：我使用 NG-重复绑定的表单元素我有，例如自定义对象的属性： $ scope.myObject = {            字体大小：10，            文本轮廓宽度：2，            边框颜色：黑，            边框宽度：3，            背景颜色：白色，...

我使用 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库更新版本：

rr

函数MyCtrl（$范围）{r  $ scope.myObject = {r    字体大小：10，r    文本轮廓宽度：2，r    边框颜色：黑，r    边框宽度：3，r    背景颜色：白色，r    '颜色'：'#FFFr  }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;

rrr

更新拨弄。

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.