代码之家 › 专栏 › 技术社区 › Pietro Nadalini

angularjs ng max with expression(带bug演示)

angularjs-ng-model html5 angularjs

Pietro Nadalini · 技术社区 · 8 年前

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

有没有方法可以将ng max添加为100(如果是百分比)或无(如果是数字量)?

我尝试了以下操作,但当输入为百分比时,它不会将最大值设置为100:

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

2 回复 | 直到 8 年前

georgeawg 8 年前

使用 `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>

Bug的演示 `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>

与 最大天然气 指令,如果用户输入小于100的数字并按向上箭头,则该数字将增加到100并继续增加。

它会将其标记为错误,并防止表单被提交。

Joseph Arriaza 8 年前

你可以在ispercent中使用一个表达式。

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

如果ispercent为true,则使用100作为max,如果不是,则使用null,因此不会有max值。

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前

angularjs ng max with expression(带bug演示)

使用 max 带插值的属性:

Bug的演示 ng-max 以下内容:

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

Bug的演示 `ng-max` 以下内容: