javascript – 对对象属性进行重复,但在输入后会分离输入框

我使用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/

最佳答案
输入无关的原因是Angular在每个myObject变化上重建了DOM.您可以专门指示重复按键进行跟踪,因此不会发生不良行为.此外,这将需要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>

Updated fiddle.

转载注明原文:javascript – 对对象属性进行重复,但在输入后会分离输入框 - 代码日志