How to use AngularJS keypress and click event combined

Question

I am creating a calculator using angularjs. When i click on the '923216' (buttons) it goes to a function called "updateOutput(btn)" and appednd them, that's work fine and the view is updated. In addion i was asked to add a keyboard support now when i click on keys 912132 it goes to "updateOutput(btn)". But the numbers are not appanended (and view not updated), instead it opens new thread (weird). on debug view: The keyboard output displays: 923216 the mouse click output displays: 912132 it should like this: 923216912132 (vise versa)

The 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>

the AngularJS controller has this:

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:

            }

        };

The directive for keypress:

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();
            }
        });
    };
});

the function on 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)

    };

the log of fireing both from keyboard and mouse:

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

Gowthaman · Accepted Answer · 2017-12-21 23:18:56Z

1

I don't see ng-model in your input field. It will be straight forward if both button click and keyboard press updates the same model. As your input field is disabled, you can create a directive to listen for keypress and update the model.

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

answered Dec 21, 2017 at 23:18

Gowthaman

1,3021 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use AngularJS keypress and click event combined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related