从数字键盘到单击的文本框的角度输入数字答案

【问题标题】：Angular-input number from number pad to clicked textbox从数字键盘到单击的文本框的角度输入数字
【发布时间】：2017-10-03 12:27:39
【问题描述】：

我是 Angular 的新手，并且我现在面临一个问题，即我有一个数字键盘和一些文本框。我必须从数字键盘输入特定的文本框。 这是代码

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

现在如果我点击 Textbox1 然后点击按钮 1 或 2 文本应该只在 Textbox1不是 textbox2 是否可以像这样使用 ng-click 将值绑定到 value

控制器上的功能

$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)"/>

或其他方式

【问题讨论】：

标签： asp.net angularjs angularjs-ng-click numpad

【解决方案1】：

我不是 100% 确定我理解您想要做什么，但如果我是对的，这应该可以满足您的需求：

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

如果你想让两个输入字段显示不同的值，你需要给它们实际分配不同的值，因为 Angular 的双向绑定意味着值将在模型和控制器同时。

在这种情况下，Ng-focus 也可以替换为 ng-click，如果您更喜欢使用它。 ng-focus 会在输入字段获得焦点时触发（例如，当您使用 tab 键到达字段时，也会触发），而 ng-click 会在单击字段时触发。

在本例中，ng-model="field1count" 也可以替换为 value="{{field1count}}"，就像您在示例中所做的那样，但使用 ng-model 更适合使用 angular。

工作sn-p：

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>

【讨论】：

非常感谢，因为我是新来的编程这些东西对我来说并不完全清楚。现在我已经明白了。我没有这样想。非常感谢，我已经改变了一点，得到了我的解决方案。再次感谢

【解决方案2】：

如果您想要输出两个不同的数据，您应该在输入中使用两个单独的 ng-model。但我不太确定你想在这里做什么.. 你能试着解释一下吗？

【讨论】：

谢谢@guillaume-roche-bayard。我找到了答案