Javascript AngularJS按钮单击将值绑定到输入

我正在用AngularJS创建一个数字键盘，输入字段可以通过按下数字按钮或手动输入值来接收输入值

我的控制器代码：

app.controller('LoginFormController', ['$scope', function($scope){
    $scope.numPass = [];

    $scope.num = function(number){
        $scope.numPass.push(number);
        $scope.input = $scope.numPass;
        console.log(number)
    };
}]);

我的HTML模板代码：

<form class="login-form" ng-controller="LoginFormController">
<div class="d-flex flex-row justify-content-center" >
    <div class="col-5">
        <input ng-model="input" type="password" class="form-control" placeholder="Login">
    </div>
</div>
<div class="row d-flex flex-row justify-content-center">
    <div class="btn-group-vertical numpad mx-4 my-3" role="group" aria-label="Basic example">
        <div class="row d-flex-flex-row justify-content-center">
            <div class="btn-group btn-group-lg">
                <button type="button" ng-click="num(1)" class="btn btn-outline-secondary border-bottom-0 num-blue">1</button>
                <button type="button" class="btn btn-outline-secondary border-bottom-0 num-blue">2</button>
                <button type="button" class="btn btn-outline-secondary border-bottom-0 num-blue">3</button>
            </div>
        </div>
        <div class="row d-flex-flex-row justify-content-center">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-outline-secondary border-bottom-0 num-blue">4</button>
                <button type="button" class="btn btn-outline-secondary border-bottom-0 num-blue">5</button>
                <button type="button" class="btn btn-outline-secondary border-bottom-0 num-blue">6</button>
            </div>
        </div>
        <div class="row d-flex-flex-row justify-content-center">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-outline-secondary num-blue">7</button>
                <button type="button" class="btn btn-outline-secondary num-blue">8</button>
                <button type="button" class="btn btn-outline-secondary num-blue">9</button>
            </div>
        </div>
        <div class="row d-flex-flex-row justify-content-center">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-outline-secondary num-blue">0</button>
                <button type="button" class="btn btn-outline-secondary red-arrow"><img class="img-fluid" src="images/web_images/Arrow-Left-Icon.png" alt=""></button>
                <button type="button" class="btn btn-outline-secondary red-arrow"><img class="img-fluid" src="images/web_images/Arrow-Left-Double-Icon.png" alt=""></button>
            </div>
        </div>
    </div>
</div>
<div class="row d-flex flex-row">
        <div class="col-12 justify-content-center btn-group submit-buttons btn-group-lg">
            <button type="button" class="col-2 btn btn-cancel">Cancel</button>
            <button type="submit" class="col-3 btn-clock-in btn btn-primary">Clock In<img class="img-fluid" src="images/web_images/clock-in-icon.png" alt="Clock In"></button>
            <button type="submit" class="col-2 btn btn-force">Force</button>
        </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
0
取消
打卡
强迫

---

这有点效果，但我相信有更好的方法来实现它。无需创建数组，然后将数组绑定到输入字段。

乍一看，这是可以改进的地方

我会用ngRepeate来显示键盘。例如：

 function keypadNumber($scope) {
  $scope.keypad = [{number: 1}, {number: 2}, {number: 3}];
}



<div class="row d-flex-flex-row justify-content-center">
  <div class="btn-group btn-group-lg">
    <button ng-repeat="(key, value) in keypad" ng-click="keypadNumber({keypad.number})">{{keypad}}</button>
  </div>
</div>

功能键盘号（$scope）{
$scope.keypad=[{number:1}，{number:2}，{number:3}]；
}
{{键盘}}

导致onclick无法绑定到输入字段的问题是，我将它们传递给数组，而不是传递给空字符串

 $scope.numPass = [];

当我应该用这个来代替的时候

 $scope.numPass = '';

---

我试图实现您提供的ng repeat代码，但没有成功。我同意大胆地循环按钮会更好。你能设置一个JSFIDLE，这样我就可以查看代码并查看它在哪里被破坏了吗？我设置了一个，我只添加了数字键盘。我消除了不必要的噪音，专注于问题。当我发现自己在解决一个问题上遇到困难时，我通常会创建一个单独的项目（POC），然后简单地开始。这里有一个简单的例子来说明你想要完成什么：太棒了！祝你好运