How to set min, max value from html only based on freqValue.
<input type="number" min="0" max="100" ng-model="interval" /> <select ng-model="freqValue" ng-options="f.key as f.value for f in freq"> </select>
You can have a map with those frequency values as its keys storing the min and max values for each frequency, so that when the model changed, angularjs will rebind the min and max values based on the map index, which is the freqValue variable.
For example:
Controller:
$scope.map = {
'1': { min: 1, max: 20 },
'2': { min: 1, max: 45 },
'3': { min: 1, max: 100 },
};
Template:
<input type="number"
min="{{ map[freqValue].min }}"
max="{{ map[freqValue].max }}"
ng-model="interval" />
<select
ng-model="freqValue"
ng-options="f.key as f.value for f in freq">
</select>
Try like this
(function() {
var app = angular.module('app', []);
app.controller('main', ['$scope', function($scope) {
var vm = this;
vm.freq = [{key:1},{key:2},{key:3}]
vm.setMinMax = function() {
if (vm.freqValue == 1) {
vm.min = 1;
vm.max = 20;
}
if (vm.freqValue == 2) {
vm.min = 1;
vm.max = 45;
}
if (vm.freqValue == 3) {
vm.min = 1;
vm.max = 100;
}
}
}]);
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="app">
<body ng-controller="main as vm">
<select ng-model="vm.freqValue" ng-options="f.key as f.key for f in vm.freq" ng-change="vm.setMinMax()">
<option value="">select</option>
</select>
<input type="number" ng-min="{{vm.min}}" max="{{vm.max}}" ng-model="interval" />
</body>
</html>