javascript - 如何基于选择 Angular 动态设置输入控件的最小值和最大值

我正在寻找一些通用的解决方案，以基于下拉选择动态地更新最小值和最大值。选中此Fiddle。

如果用户选择：


小时-最小值和最大值应为1到24
分钟-最小值和最大值应为60到6000
秒-最小值和最大值应为3000到10000


我正在寻找一些解决方案，该解决方案将根据选择来更新输入控件上的绑定。它还应更新验证消息。寻找一些通用且可重用的解决方案，以便可以在整个应用程序中重用。

这是我的代码：
的HTML

<div ng-app="app">
<div ng-controller="TimeController as vm">
    <label>Desired RPO</label>
    <div>
        <div class="input-group">
            <input type="number" class="form-control" name="desiredRPO" min="minvalue" max="maxvalue" step="1" />
            <div class="input-group-btn" style="display:inline-block;">
                <select class="form-control">
                    <option>HOURS</option>
                    <option>MINUTES</option>
                    <option>SECONDS</option>
                </select>
            </div>
        </div>
        <span>Please enter value between {{minvalue}} and {{maxvalue}}</span>
    </div>
</div>

JS

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
    var vm = this;
});

最佳答案

在此处查看答案PLUNKER

在您的HTML中

<div ng-app="app">
   <div ng-controller="TimeController as vm">
   <form  name="vm.timeForm" novalidate>
      <div class="form-group">
        <label>Please select</label>
        <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()">
            <option value="hours">HOURS</option>
            <option value="minutes">MINUTES</option>
            <option value="seconds">SECONDS</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine }">
        <label>Desired RPO</label>
        <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue">
        <p ng-show="vm.timeForm.desiredRPO.$invalid" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p>
      </div>
   </form>
  </div>

在您的控制器中

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
   var vm = this;

   vm.timeForm = {};

   vm.updateMinMax = function() {
      if(vm.selectedOption === 'hours') {
         vm.minValue = 1;
         vm.maxValue = 24;
      } else if(vm.selectedOption === 'minutes') {
         vm.minValue = 60;
         vm.maxValue = 6000;
      } else {
         vm.minValue = 3000;
         vm.maxValue = 10000;
      }
   }
});

关于javascript - 如何基于选择 Angular 动态设置输入控件的最小值和最大值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39724685/