Angular-input number from number pad to clicked textbox

Question

I am new in Angular and I am facing a problem right now that is, I have a number pad and some textboxes. I have to input to the particular textbox from number pad. Here is the Code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script> 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = ''
   });
</script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button id="btn1" ng-click="count = count + 1">1</button>
<button id="btn2" ng-click="count = count + 2">2</button>
<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"/>
<label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"/>
</div> 
</body>
</html>

Now if I click on Textbox1 then click on button 1 or 2 text should be only on Textbox1 not textbox2 is it possible to bind value to value using ng-click like this

function on controller

$scope.change = function(evt) {
    evt.target.value={{count}};
    alert(evt.target.id)

html

<label>Textbox1</label><input type="text" id="Textbox1" value="{{count}}"  ng-click="change($event)"/>
        <label>Textbox2</label><input type="text" id="Textbox2" value="{{count}}"  ng-click="change($event)"/>

or some other way

Patrick · Accepted Answer · 2017-10-03T14:43:44.180

I'm not 100% sure I understood what you want to do, but if I'm right, this should do what you want:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script> 
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.count = 0;
        $scope.field1count;
        $scope.field2count;
        $scope.selectedField = 0;

        $scope.calculateField = function(amount){
            var result = $scope.count + amount;
            $scope.count = result;
            if($scope.selectedField == 1){
                $scope.field1count = result;
            } else if($scope.selectedField == 2){
                $scope.field2count = result;
            }
        }
    });
</script>  
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <button id="btn1" ng-click="calculateField(1)">1</button>
    <button id="btn2" ng-click="calculateField(2)">2</button>
    <label>Textbox1</label>
    <input type="text" id="Textbox1" ng-focus="selectedField = 1" ng-model="field1count"/>
    <label>Textbox2</label>
    <input type="text" id="Textbox2" ng-focus="selectedField = 2" ng-model="field2count"/>
</div>
</body>
</html>

If you want the two input fields to display different values, you need to actually assign them different values, as angular's two-way-binding means the value will be updated in both the model and the controller simultaneously.

Ng-focus can also be replaced by ng-click in this case, if you prefer using that. Ng-focus is triggered when the input field gains focus (When you use, for example, the tab key to reach the field, this will also be triggered), while ng-click does so when the field is clicked upon.

In this example ng-model="field1count" can also be replaced with value="{{field1count}}", as you did in your example, but the use of ng-model is more appropriate to the use of angular.

Working snippet:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.field1count;
    $scope.field2count;
    $scope.selectedField = 0;

    $scope.calculateField = function(amount){
      var result = $scope.count + amount;
        $scope.count = result;
        if($scope.selectedField == 1){
            $scope.field1count = result;
        } else if($scope.selectedField == 2){
            $scope.field2count = result;
        }
    }
   });

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <button id="btn1" ng-click="calculateField(1)">1</button>
    <button id="btn2" ng-click="calculateField(2)">2</button>
    <label>Textbox1</label><input type="text" id="Textbox1" ng-click="selectedField = 1" ng-model="field1count"/>
    <label>Textbox2</label><input type="text" id="Textbox2" ng-click="selectedField = 2" ng-model="field2count"/>
    </div>
</body>
</html>

Thanks a ton, as I am new to programming these things was not totally clear to me. Now I have understood it clearly. I did not think in this way. Thanks a lot, I have changed a bit and got my solution.Thanks again — Imran Hossain, Oct 03 '17 at 18:34

score 0 · Answer 2 · answered Oct 03 '17 at 12:39

0

You should use two separeted ng-model on your input if what you want is to output two different datas. But I'm not really sure of what you want to do here .. Can you try to explain it a bit more ?

answered Oct 03 '17 at 12:39

Guillaume Roche-Bayard

377
5
17

Thanks @guillaume-roche-bayard. I have found my answer – Imran Hossain Oct 03 '17 at 18:37

Angular-input number from number pad to clicked textbox

2 Answers2