我正在寻找一些通用的解决方案，以基于下拉菜单选择动态地更新最小值和最大值。检查这个小提琴。
如果用户选择：
我正在寻找一些解决方案，该解决方案将根据选择来更新输入控件上的绑定。此外，它还应该更新验证消息。寻找一些通用且可重用的解决方案，以便可以在整个应用程序中重用。
这是我的代码：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;
}
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句