Question

我使用按钮向输入元素追加一个值。虽然模型变量已更新，但输入值保持不变。如何解决？

<input type="text"
                           class="form-control"
                           id="inputSecurityCode"
                           style="width: 100%"
                           placeholder="4 digits"
                           name="inputSecurityCode"
                           ng-model="reservation.securityCode"
                           ng-pattern="patterns.securityCode"
                           ng-focus="focused('inputSecurityCode')"
                           ng-blur="blurred('inputSecurityCode')"
                            />
<button type="button" ng-click="numButtonClick(1)">1</button>

AngularJS

    $scope.reservation = {
            securityCode: undefined
        };

    $scope.numButtonClick = function(num){
                switch($scope.focusedInput){
                    case 'inputSecurityCode':
                        $scope.reservation.securityCode += num;
                        break;
                }

        };
$scope.patterns = { 
                        securityCode : /^[0-9]{4}$/
    };

更新

可能是因为起始值是undefined，NaN，当尝试NaN加整数时返回NaN并且无法添加到输入中。它应该是null而不是undefined吗？

更新2

所有undefined都已更改为null，但观察到相同的行为。

更新3

当我删除ng-pattern="patterns.securityCode"时，我发现一切正常。怎么样？

Answer 1

编辑：这似乎不是OP的问题，可能是不正确的信息。

这是因为AngularJS不会自动传播对象的基元属性的更改。

手动重新应用绑定：

$scope.numButtonClick = function(num){
            switch($scope.focusedInput){
                case 'inputSecurityCode':
                    $scope.$apply(function(){
                         $scope.reservation.securityCode += num;
                    });
                    break;
            }

    };

模型属性更改后未更新输入元素

1 个答案: