Angular-从数字键盘输入数字到点击的文本框

Question

我是 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)"/>

或其他方式

Answer 1

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

Answer 2

我不是 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 .

工作片段：

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>

Angular-从数字键盘输入数字到点击的文本框

Angular-input number from number pad to clicked textbox

asp.net

angularjs

angularjs-ng-click

numpad