10

問題を示す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>

入力でキーが押されるたびに、その横の値は正しく更新されますが、入力はフォーカスを失います。これをどのように修正できるか考えていますか？

4

2 に答える 2

8

編集が完了するまで再生を延期する方法があればいいのにと思います。

あなたはそれをすることができるかもしれません。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 />
于 2013-01-18T02:40:35.243 に答える
5

グーグルフォーラムから：

問題は、モデルオブジェクトを変更するたびに、ng-repeatが配列全体を再生成するため、入力ボックスがぼやけることです。あなたがする必要があるのはあなたの文字列をオブジェクトで包むことです

于 2013-01-15T15:27:28.277 に答える