我正在寻找一些通用解决方案，根据下拉选择动态更新最小值和最大值。请检查此Fiddle。
如果用户选择：
我正在寻找一些解决方案，它将根据选择更新输入控件的绑定。它还应该更新验证消息。寻找一些通用和可重用的解决方案，以便可以跨应用程序重复使用。
这是我的代码： 的 HTML
Single<T1> s1 = …;
Single<T2> s2 = …;
Single<T3> s3 = …;
Completable c = …;
Single.zip(s1, s2, s3, c.toSingleDefault(""), (a, b, c, ignore) -> {
// All singles have emitted an item and c is completed
…
})
JS
<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>
答案 0 :(得分：2)
请在此处查看答案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;
}
}
});
答案 1 :(得分：1)
这是你需要的答案，有一个小提琴
var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
var vm = $scope;
vm.update_values = function() {
if(vm.selected === 'hours') {
vm.min = "1";
vm.max = "24";
} else if(vm.selected === 'minutes') {
vm.min = "60";
vm.max = "6000";
} else {
vm.min = "3000";
vm.max = "10000";
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></style>
<div ng-app="app">
<div ng-controller="TimeController">
<label>Desired RPO</label>
<div>
<div class="input-group">
<input type="number" class="form-control" name="desiredRPO" min="{{min}}" max="{{max}}" step="1" ng-model="time"/>
<div class="input-group-btn" style="display:inline-block;">
<select class="form-control" ng-change="update_values()" ng-model="selected">
<option value="">Please Select</option>
<option value="hours">HOURS</option>
<option value="minutes">MINUTES</option>
<option value="seconds">SECONDS</option>
</select>
</div>
</div>
<span>Please enter value between {{min}} and {{max}}</span>
</div>
<h3>Requirement: </h3>
<h4>
If user select :
Hours - min and max value should be 1 to 24 <br>
Minutes - min and max value should be 60 to 6000 <br>
Seconds - min and max value should be 3000 to 10000 <br>
</h4>
<h6>
I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message.
Looking for some generic and reusable solution so It can be reused across application.
</h6>
</div>
请运行代码并检查
答案 2 :(得分：0)
动态值有ng-min ng-max指令
<input ng-min="vm.diapason.min" ng-max="vm.diapason.max"/>
<select class="form-control" ng-model="vm.diapason"
ng-options="option.label for option in vm.restrictions">
</select>
和控制器
vm.restrictions = [
{
label: 'HOURS',
min: 1,
max: 24
},
{
label: 'MINUTES',
min: 60,
max: 6000
},
{
label: 'SECONDS',
min: 3000,
max: 10000
}
]
答案 3 :(得分：0)
我刚刚创建了一个有效的Plunkr，希望它有所帮助。
https://plnkr.co/edit/rCQzEhojZP0iHvoI1KlO?p=preview
的index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="TimeController as vm">
<label>Desired RPO</label>
<div>
<div ng-init="item=timings[0]" class="input-group">
<input type="number" class="form-control" name="desiredRPO" min="{{item.min}}" max="{{item.max}}" step="1" />
<div class="input-group-btn" style="display:inline-block;">
<select
ng-model="item"
ng-options="item.type for item in timings"></select>
</div>
</div>
<span>Please enter value between {{item.min}} and {{item.max}}</span>
</div>
<h3>Requirement: </h3>
<h4>
If user select :
Hours - min and max value should be 1 to 24 <br>
Minutes - min and max value should be 60 to 6000 <br>
Seconds - min and max value should be 3000 to 10000 <br>
</h4>
<h6>
I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message.
Looking for some generic and reusable solution so It can be reused across application.
</h6>
</div>
</body>
</html>
的script.js
var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
var vm = this;
$scope.timings = [{type: 'HOURS', min: 1, max: 24},
{type: 'MINUTES', min: 60, max: 6000},
{type: 'SECONDS', min: 3000, max: 10000}];
});