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

Question

我正在寻找一些通用解决方案来根据下拉选择动态更新最小值和最大值。检查这个Fiddle .

如果用户选择:

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

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

这是我的代码: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;
});

Answer 1

在这里查看答案 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>

在你的 Controller 中

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;
      }
   }
});