项目中有个很简单的小bug,输入框的值绑定了ng-model,但是需要实现改变输入框的值时不更新ng-model。
做了个小demo模拟,在输入框中进行输入时,Hello后的字符串并不发生改变,当输入框失去焦点时,Hello {{name}}发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp">
<input type="text" ng-model="name" ng-model-options = "{updateOn:'blur'}" />
<p>Hello {{name}}!</p>
<script src="node_modules/angular/angular.js"></script>
<script type="text/javascript">
(function(window){
var app = angular.module('myApp', []);
})(window);
</script>
</body>
</html>
ng-model-options是angular-1.3新出的一个指令,允许我们控制ng-model何时进行同步操作。
比如:1、当某个确定的事件被触发时;2、在指定的防抖动延迟时间之后,视图值会在指定的时间之后被同步更新到模型;
ng-model-options = "{updateOn:'blur'}"
表示当输入框失去焦点时,更新ng-model的值;
ng-model-options = "{debounce:1000}"
表示当输入框输入字符后,延时1s更新ng-model的值;