在输入控制失去焦点后更新模型答案

【问题标题】：Updating model after focus is lost on input control在输入控制失去焦点后更新模型
【发布时间】：2014-07-01 14:39:27
【问题描述】：

在这段代码中：

<input class="form-control" ng-model="actionText" />

AngularJS 将在用户输入内容时更新模型 actionText。如果此模型在其他地方使用，例如在控制器中，它会随着每个字符的输入而更新。我可以想到这实际上可能是一件坏事的情况。也许您只需要在用户将焦点从输入转移到其他东西之后的模型值，例如当您需要在输入完成后验证输入时。我可以使用 Javascript 的 blur 函数来设置处理程序来确定何时失去焦点，但这似乎与 Angular 的本意背道而驰。输入失去焦点后是否有 AngularJS 更新模型的方法？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以为此使用ngModelOptions 指令。使用ngModelOptions，您可以进一步完善ngModel 指令的工作方式。为了实现您的要求，您可以这样使用它：

<input class="form-control" ng-model="actionText" 
   ng-model-options="{ updateOn: 'blur'}"/>

您可以在 Angular 文档中找到更多信息和工作示例：https://docs.angularjs.org/api/ng/directive/ngModelOptions

【讨论】：

这是处理验证的推荐方式吗？换句话说，在你失去焦点后，你想要验证某些模式（地址、电话号码等）的输入。
我不记得在文档（1.3 之前）中阅读过有关此内容的内容，但我很喜欢添加此功能以支持模型的更新方式。

【解决方案2】：

我认为最简单的方法可能是使用ng-blur 来触发你想做的事情。

http://plnkr.co/edit/rhcliQRzUOBKQ3xKFrde?p=preview

app.controller('MainCtrl', function($scope) {

  $scope.myDataBlurred = $scope.myData;

  $scope.blurred = function() {
     $scope.myDataBlurred = $scope.myData;
  }
});

 <input ng-model='myData' ng-blur='blurred()' />

    <div>
      This will update as you type: {{myData}}
    </div>
    <div>
      This will update after you blur:  {{myDataBlurred}}
    </div>

【讨论】：

我确实喜欢 @Nikolas 发布的 ng-model-options。取决于您的用例和 angular 版本。