AngularJS ng-max with expression (有bug的DEMO)

Question

我有一个输入，可以是数值或百分比。我想相应地限制输入的最大数量。

有没有办法可以将 ng-max 添加为 100（如果它是百分比）或者什么都没有？

我尝试了以下方法，但当输入是百分比时，它没有将最大值设置为 100:

<input type="number" min="0" ng-max="vm.isPercent ? '100' : ''">

Answer 1

使用带插值的 `max` 属性：

    <input type="number" name="num1" ng-model="vm.num" required
           min="0" max="{{vm.isPercent ? 100 : null}}" />

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="vm={isPercent:true, num:101}">
  <form name="form1">
    <input type="checkbox" ng-model="vm.isPercent">Is Percent<br>
    <input type="number" name="num1" ng-model="vm.num" required
           min="0" max="{{vm.isPercent ? 100 : null}}" /><br>
    Value={{vm.isPercent ? vm.num/100 : vm.num}}
  </form>
  <div ng-show="form1.$error.max" style="color: red">
     Invalid: Percentage must be less than 100
  </div>
</body>

带有 `ng-max` 错误的演示：

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="vm={isPercent:true, num:101}">
  <form name="form1">
    <input type="checkbox" ng-model="vm.isPercent">Is Percent<br>
    <input type="number" name="num1" ng-model="vm.num" required
           min="0" ng-max="vm.isPercent ? 100 : null" /><br>
    Value={{vm.isPercent ? vm.num/100 : vm.num}}
  </form>
  <div ng-show="form1.$error.max" style="color: red">
     Invalid: Percentage must be less than 100
  </div>
</body>

使用ng-max指令，如果用户输入小于100的数字，按向上箭头，数字会增加到100，并继续增加。

它确实将其标记为错误并阻止提交表单。

Answer 2

您可以使用带有 isPercent 的表达式。

<input type="number" min="0" max="{{isPercent ? 100 : null}}

如果isPercent为真，则最大值为100，否则为null，因此不会有最大值。

AngularJS ng-max with expression (有bug的DEMO)

AngularJS ng-max with expression (with DEMO of bug)

html

angularjs

angularjs-ng-model

使用带插值的 `max` 属性：

带有 `ng-max` 错误的演示：

AngularJS ng-max with expression (有bug的DEMO)

AngularJS ng-max with expression (with DEMO of bug)

html

angularjs

angularjs-ng-model

使用带插值的 max 属性：

带有 ng-max 错误的演示：

使用带插值的 `max` 属性：

带有 `ng-max` 错误的演示：