最大值和最小值对输入无效

Question

在angularjs应用中，我有输入字段，我需要在其中输入数字。我这样设置最大值和最小值

<input type="number" min="0" max="{{totaImpressionsSum}}"/>

在$scope.totaImpressionsSum上，我从控制器获取值，在这种情况下，该值为5000。

在控制台中检查时，已正确设置最大值。

我也尝试ng-max和ng-min ... 但是，这一切都不起作用，我仍然可以键入小于0且大于5000的数字。

我做错了什么？ 在另一个地方，这个工作正确...但是在这里不是...

这里是plunker

Answer 1

这不是min/max属性的工作方式-在处理有效性时会考虑它们，但它们不会限制用户输入的内容。

假设您将min="10"放在这里，然后想输入数字10。但是您不能这样做，因为首先需要输入数字1，然后键入0，但是数字1本身不是有效的输入。

看看MDN示例如何使用:valid和:invalid伪类：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Answer 2

您只是想念ng-model，我更新了您的plunkr

通过最小/最大，您将能够使用angularsjs表单验证器。根据您要实现的目标，可以根据表单验证禁用按钮。

这是一个更完整的示例：

<form name="myForm">
    <input type="number" ng-model="test" min="0" max="{{totaImpressionsSum}}"/>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

如您所见，我为表单命名。然后，ng-disalbed指令允许我在表单无效的情况下禁用提交按钮。