AngularJs Ng-Keypress事件工作不正常？

Question

我正在开发一个Angularjs应用程序。 我在输入类型为text的元素中使用ng-keypress事件。 在输入文本时，keypress函数中获取到错误的值。 例如，第一次如果我键入“1”，我会得到undefined。 第二次，键入任何其他值都会给出第一个值。

<input ng-model="NodeId_1" type="text" ng-keypress="getValue()"/>

 var angularapp = angular.module('nameapp', []);

    angularapp.controller('NameCtrl', function ($scope) {
        $scope.getValue = function () {
            alert($scope.NodeId_1);//Here first time undefined is coming and second what ever we enter first value will come
        }
    }
 )

- Ramasamy Kanna

---

你能否在这里粘贴一些你的代码参考？ - Gyan Chandra Srivastava

尝试使用Angular Hotkeys：http://chieffancypants.github.io/angular-hotkeys/ - Christian Bonato

你不需要使用另一个库，看看我的答案，了解为什么你的实现不起作用。还有在线演示。 - Shelby L Morris

Answer 1

你应该使用ng-keyup。

ng-keypress在按键按下后、值填充到输入框之前触发，这就是为什么第一次按键没有任何值返回，但在后续按键中会有。

使用ng-keyup就可以解决问题了，因为它会在值已经填充到输入框之后触发。

<input ng-model="NodeId_1" type="text" ng-keyup="getValue()" />

ng-keypress可以正常工作，但它不是适用于您要求的指令。

可工作的示例: http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

- Shelby L Morris

---

你可能还想将 $event 传递给你的 getValue() 函数并检查是否按下了回车键（event.keyCode !=13），然后发送警报。http://plnkr.co/edit/0PO3U4wp7EtYsPgBDklb?p=preview - DineshKP

回车键和退格键是表单中常见的按键，用户可以添加其他必要的按键以适应他的应用程序。回答这个问题可能对专业人士来说很简单，但初学者需要了解这些基本知识。 - DineshKP

哈哈：D使用简单的词语和逐步解释有助于消除编程中的神秘部分：p但我同意，简单的词语和逐步解释有时可能很繁琐。让我们不要偏离主题 :) - DineshKP

无法执行 event.preventDefault() http://plnkr.co/edit/yFxdYwIt9EfVFSQ8 - Ankit Pandey

Answer 2

按键事件在按下一个键并且该键通常产生一个字符值时触发（请使用输入事件）。https://developer.mozilla.org/en-US/docs/Web/Events/keypress

因此，输入字段的值以及作用域值（应用/脏检查循环等）都不会反映预期的输入值。

解决方案取决于您的要求。以下是一些选择：

1）在输入字段上使用另一个事件：change、keyup等

2）在侦听器方法中使用$event对象：

<input ng-model="NodeId_1" type="text" ng-keypress="getValue($event)"/>

$scope.getValue = function (event) {
    console.log(event)
}

3) 在您的作用域内为NodeId_1值创建一个监视器：

$scope.$watch('NodeId_1', function(newVal) {
    ...
});

- Zhonk

Answer 3

观察者函数对我有用，我附上了我的示例

$scope.$watch('itemm.montoAmodificar', function (newValue) {
    $scope.fnActualizarNuevoSaldoDependencia(parseFloat(newValue));
});

HTML代码如下

<input ng-model="itemm.montoAmodificar" my-focus class="form-control" type="text" placeholder="Ingrese el monto" ng-keypress="fnActualizarNuevoSaldoDependencia($event);" />

- Jorge Santos Neill