22

コード：

<input type="text" ng-modal="name" />
{{name}}

に何か入力すると、すぐinputに次のように変化します。すべての文字を入力して入力を終了{{name}}した後にのみ更新するように設定できますか?name

4

4 に答える 4

53

これは、将来の回答として役立つ、AngularJS への最近の追加に関するものです。

Angular の新しいバージョン (現在は 1.3 ベータ版) では、AngularJS はこのオプションをネイティブにサポートしていますngModelOptions。

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions ドキュメント

例：

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
于 2014-04-13T16:55:22.680 に答える
22

アップデート

ng-model-options多くの人が言及しているように、Angular にはディレクティブを使用した組み込みサポートがあります。詳しくはこちらをご覧ください。

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

以下の古い回答：

その動作を変更する ng-model の組み込みオプションはありませんが、それを行うカスタム ディレクティブを作成できます。@Gloopy は、別の質問に対してそのようなディレクティブを作成しました。ここでフィドルを見ることができます。

ディレクティブは、キーストロークごとに更新をトリガーするinputおよびイベントから登録解除します。keydown

<input type="text" ng-model="name" ng-model-onblur />

アップデート：

github でマスター バージョンを直接参照する代わりに、最新の安定した AngularJS (執筆時点で 1.2.16) を使用するようにフィドルを更新しました。

ng-modelイベントリスナーが正しく変更されるように、ディレクティブが後に実行されるように、明示的な優先順位も追加されました。

于 2013-02-06T06:29:36.080 に答える
9

より良いオプションは、ng-model-options を使用することです。

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />
于 2014-07-07T11:47:31.450 に答える
5

作業指示コード (ng-1.2RC3): 次を使用: ng-model-onblur

.directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 1,
      link: function (scope, element, attrs, ngModelCtrl) {
          if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
          var update = function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(element.val().trim());
                  ngModelCtrl.$render();
              });
          };
          element.off('input').off('keydown').off('change').on('focus', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setPristine();
              });
          }).on('blur', update).on('keydown', function (e) {
              if (e.keyCode === 13) {
                  update();
              }
          });
      }
  };
})
于 2014-05-10T17:49:54.140 に答える