Question

我在这里得到了类似的东西：

<div class="col-md-4">
    <input type="number" class="form-control" ng-model="apMin" placeholder="0">
</div>
<div class="col-md-2 text-center">-</div>
<div class="col-md-4">
    <input type="number" class="form-control" ng-model="apMax" placeholder="0" ng-required="apMin < apMax">
</div>

我现在需要确保apMin不高于apMax。我试过像：

ng-required="apMin < apMax"

这个领域不是必需的，但更重要的是工作的逻辑。有人知道如何实现它吗？

Answer 1

您可以在输入中使用min和max属性吗？

<input type="number" class="form-control" ng-model="apMin" placeholder="0" max="{{apMax-1}}"/>

和

<input type="number" class="form-control" ng-model="apMax" placeholder="0" min="{{apMin+1}}"/>

Answer 2

您可以尝试在两个变量上使用$ watch将该逻辑放入控制器中。

 $scope.$watch("apMin", function(newVal, oldVal) {
    if (newVal > $scope.apMax) {
      alert("-Min cannot be greating then max");
      $scope.apMin = $scope.apMax - 1;
    }
  });

  $scope.$watch("apMax", function(newVal, oldVal) {
    if (newVal < $scope.apMin) {
      alert("+Min cannot be greating then max");
      $scope.apMax = $scope.apMin + 1;
    }
  });

请参阅此Plunker

或者您可以尝试在apMax文本框中附加ng-blur并检查以确保apMax不小于apMin。

希望这会有所帮助。

Answer 3

结帐min/max directives

的此链接

您可以像以下一样使用它们：

<input type="number" ng-model="value1" ng-min="minValue" name="value1"/>
<input type="number" ng-model="value2" ng-max="maxValue" name="value2"/>

验证不需要的表单元素

3 个答案: