Question

我需要将输入值限制为[1,5000000]。我想以编程方式进行。我正在使用AngularJS作为我的Web应用程序。这是我写的代码：

HTML

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required/>

JS

angular.module("app", []).controller("controller", function($scope) {
    $scope.checkLimit = function() {
        $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
        $scope.data.flips;
        $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips;
    }
});

我确定该函数运行，但输入字段和变量中的值未更新。我对Angular比较新，所以可能有一些我缺少的基本概念。

Answer 1

编辑：请参阅cccross'更清洁版的答案

~~您需要转义当前的摘要周期，因为我不相信如果在该元素的更改事件中更新了属性值，则angular将使用新属性值更新元素。~~

可能有更简洁的方法来满足您的要求;但是，这个例子有效。我删除了'min'和'max'输入属性，并将ng-change listener逻辑移到'$ timeout'调用中。 $ timeout包含在控制器参数中。 $ timeout将触发另一个摘要周期，这将更新您的输入。

angular.module("app", []).controller("controller", function($scope, $timeout) {
    $scope.checkLimit = function() {
        $timeout(() => {
            $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
            $scope.data.flips;
            $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips;
        })
    }
});

fiddle

Answer 2

您需要删除min和max属性，因为此验证不允许更改ng模型。

如果你想保持最小值和最大值，你可以添加像这样的ng-model-options：

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required
                           ng-model-options="{ allowInvalid: true, updateOn: 'blur' }"/>

请注意，我们使用的是ng-model-options，因此我们必须使用适当的角度版本＆gt; = 1.4

如何使用javascript限制输入值？

2 个答案: