Question

我正在使用angularjs创建一个计算器。当我点击'923216'（按钮）时，它会转到一个名为“updateOutput（btn）”的函数，然后将它们运行，这样就可以正常工作并更新视图。另外，当我点击键912132进入“updateOutput（btn）”时，我被要求添加键盘支持。但这些数字并不适用（并且视图未更新），而是打开新线程（奇怪）。在调试视图上：键盘输出显示：923216 鼠标单击输出显示：912132 它应该是这样的：923216912132（反之亦然）

HTML：

<div class="container-fluid" my-enter="vm.doSomething()">
<div class="well BoxB">
    <div class="row">
        <div class="col-md-12 input-group input-group-lg">
            <input type="text" style="height:50px;font-size:xx-large;direction: ltr;text-align:right;padding-right:5px;" class="form-control input-lg " placeholder="0" value='{{vm.output}}' disabled />
            <span class="input-group-addon BoxC" style="cursor:pointer;" ng-click="vm.toClipboard()">העתק</span>
            <span class="input-group-addon BoxC" style="cursor:pointer;" ng-click="vm.clear()">נקה</span>
        </div>
        <div class="row">
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-click="vm.clear()">AC</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.percentage()">%</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.squareRoot()">√</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-click="vm.toggel()">+/-</button></div>
        </div>
        <div class="row">
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.divide()">/</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.updateOutput('9','mouse')">9</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.updateOutput('8','mouse')">8</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-primary btn-block" ng-mousedown="vm.updateOutput('7','mouse')">7</button></div>
        </div>

AngularJS控制器有：

self.doSomething = function () {

            switch (event.which) {
                case 48:
                    self.updateOutput('0','keyboard');
                    break;
                case 49:
                    self.updateOutput('1', 'keyboard');
                    break;
                case 50:
                    self.updateOutput('2', 'keyboard');
                    break;
                case 51:
                    self.updateOutput('3', 'keyboard');
                    break;
                case 52:
                    self.updateOutput('4', 'keyboard');
                    break;
                case 53:
                    self.updateOutput('5', 'keyboard');
                    break;
                case 54:
                    self.updateOutput('6', 'keyboard');
                    break;
                case 55:
                    self.updateOutput('7', 'keyboard');
                    break;
                case 56:
                    self.updateOutput('8', 'keyboard');
                    break;
                case 57:
                    self.updateOutput('9', 'keyboard');
                    break;

                default:

            }

        };

按键指令：

var mainApp = angular.module("sample");
mainApp.directive('myEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if (event.which >= 49 && event.which <= 57) {
                scope.$apply(function() {
                    scope.$eval(attrs.myEnter);
                });
                event.preventDefault();
            }
        });
    };
});

updateOutput上的函数：

 self.updateOutput = function (btn,src) {

        if (self.output == "0" || self.newNumber) {
            self.output = btn;
            self.newNumber = false;
        } else {
            self.output += String(btn);
        }
        self.pendingValue = toNumber(self.output);

        //******DEBUG*******//
        var tmp_str = "number pressed is "
        var tmp_str1 = " and the source is "

        console.log("updateOutput: " + tmp_str + self.output + tmp_str1 + src)

    };

键盘和鼠标的触发日志：

updateOutput: number pressed is 9 and the source is keyboard
updateOutput: number pressed is 98 and the source is keyboard
updateOutput: number pressed is 987 and the source is keyboard
updateOutput: number pressed is 9876 and the source is keyboard
updateOutput: number pressed is 1 and the source is mouse
updateOutput: number pressed is 12 and the source is mouse
updateOutput: number pressed is 123 and the source is mouse

Answer 1

我在输入字段中看不到ng-model。如果按钮单击和键盘按下更新相同型号，它将是直接的。由于您的输入字段为disabled，您可以创建一个指令来监听按键并更新模型。

https://jsfiddle.net/qpah85bk/1/

如何使用AngularJS keypress和click事件相结合

1 个答案: