如何将Escape上的输入字段重置为上一个值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将Escape上的输入字段重置为上一个值相关的知识，希望对你有一定的参考价值。
当按下转义键时，将输入字段设置为其先前值的正确方法是什么？
我找到了这个指令：
.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的used指令：
.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'，但是使用变量它不起作用。
那么最好的选择是什么？我需要它动态用于重复循环。
答案
删除updateOn: 'blur'和重置temp做了伎俩......
<input data-ng-focus="temp = mymodel.value"
esc-key="mymodel.value = temp; temp='';"
type="text" data-ng-model="mymodel.value"
/>
对于更清洁的解决方案仍然感到高兴，因为喜欢仅在模糊时更新模型。
另一答案
我拿了@Bharat的plunker示例并调整它以使用指令。
(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>以上是关于如何将Escape上的输入字段重置为上一个值的主要内容，如果未能解决你的问题，请参考以下文章