AngularJS：在每次按键时使用动态 ng 模型模糊更新输入答案

【问题标题】：AngularJS: Updating an input with a dynamic ng-model blurs on each key pressAngularJS：在每次按键时使用动态 ng 模型模糊更新输入
【发布时间】：2012-12-29 17:13:58
【问题描述】：

jsFiddle 演示问题：http://jsfiddle.net/yoxigen/xxTJc/

我正在构建一个小表单来编辑对象的所有属性。为此，我有一个用于属性的中继器。每个属性都有其输入：

<ul ng-controller="myController">
   <li ng-repeat="(property, value) in obj">
       <input ng-model="obj[property]"/><span>{{value}}</span>
   </li>
</ul>

每次在输入中按下一个键，它旁边的值都会正确更新，但输入会失去焦点。知道如何解决这个问题吗？

【问题讨论】：

标签： javascript forms angularjs

【解决方案1】：

来自google forums：

问题是随着模型对象的每次更改 ng-repeat 重新生成整个数组，从而使您的输入框变得模糊。您需要做的是将字符串包装在对象中

【讨论】：

这应该可以，但是这意味着将模型的结构从对象更改为数组，非常不方便。我希望有一种方法可以推迟重新生成，直到我完成编辑。

【解决方案2】：

我希望有办法将再生推迟到我完成编辑。

你也许可以做到。只需制作一个自定义指令来消除 AngularJS 事件并改为收听“更改”。以下是该自定义指令的示例：

YourModule.directive('updateModelOnBlur', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attr, ngModelCtrl)
    {
      if(attr.type === 'radio' || attr.type === 'checkbox')
      {
        return;
      }

      // Update model on blur only
      elm.unbind('input').unbind('keydown').unbind('change');
      var updateModel = function()
      {
        scope.$apply(function()
        {
          ngModelCtrl.$setViewValue(elm.val());
        });
      };
      elm.bind('blur', updateModel);

      // Not a textarea
      if(elm[0].nodeName.toLowerCase() !== 'textarea')
      {
        // Update model on ENTER
        elm.bind('keydown', function(e)
        {
          e.which == 13 && updateModel();
        });
      }
    }
  };
});

然后根据您的输入：

<input type="text" ng-model="foo" update-model-on-blur />

【讨论】：