如何将Escape上的输入字段重置为以前的值
如何将Escape上的输入字段重置为以前的值
提问于 2015-08-11 23:38:30
当按下退出键时，将输入字段设置为先前的值的正确方法是什么？
我发现了这个指令：
.directive('resetWithEsc', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, controller) {
element.on('keydown', function(ev) {
if (ev.keyCode != 27) return;
scope.$apply(function() {
controller.$setViewValue("");
controller.$render();
});
});
}
};
})但上面写着TypeError: Cannot read property '$setViewValue' of null
我还尝试存储了prev。$scope.temp中的值和用于检测ESC按下的指令：
.directive('escKey', function () {
return function (scope, element, attrs) {
element.bind('keyup', function (event) {
console.log("UP");
if(event.which === 27) { // 27 = esc key
console.log("ESC");
scope.$apply(function (){
scope.$eval(attrs.escKey);
});
event.preventDefault();
}
});
};
})然后我像这样使用它：
<input data-ng-focus="temp = mymodel.value"
ng-model-options="{updateOn: 'blur'}" esc-key="mymodel.value = temp"
type="text" data-ng-model="mymodel.value"
/>它检测到正确的退出键，如果我设置了esc-key="mymodel.value = 'TEST'"，它也会将输入字段设置为'TEST'，但使用变量时它不起作用。
那么最好的选择是什么呢？我需要它在重复循环中动态使用。
回答 2
Stack Overflow用户
发布于 2015-08-12 00:31:41
删除updateOn: 'blur'并重置temp确实起到了作用...
<input data-ng-focus="temp = mymodel.value"
esc-key="mymodel.value = temp; temp='';"
type="text" data-ng-model="mymodel.value"
/>仍然会很高兴有一个更干净的解决方案，因为喜欢更新模型实际上只在模糊上。
Stack Overflow用户
发布于 2018-10-22 22:09:44
我采用了@Bharat的柱塞示例，并将其调整为使用指令。
(function(angular) {
'use strict';
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.users = [
{
name: 'name1',
data: ''
},
{
name: 'name2',
data: ''
},
{
name: 'name3',
data: ''
},
];
}])
.directive('escape', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.bind('keyup', function (event) {
if(event.which === 27) { // 27 = esc key
ngModel.$rollbackViewValue();
event.preventDefault();
}
});
}
}
});
})(window.angular);<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngModelOptions-directive-blur-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
<ul>
<li data-ng-repeat="user in users">
<label>Name:
<input
type="text"
name="userName{{$index}}"
ng-model="user.name"
escape
ng-model-options="{updateOn: 'blur change'}"/>
</label>
<br />
<pre>user.name = <span ng-bind="user.name"></span></pre>
</li>
</ul>
</form>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31946161
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号