I have a couple of inputs like this:
<input type='range' min='15' max='{{plan.retirementAge - 1}}' name='age' ng-model='plan.age' />
<input type='range' min='{{plan.age + 1}}' max='90' name='retirementAge' ng model='plan.retirementAge' />
This works correctly when the page first loads, but if I change either value the other one will treat the binding as a string and change it to "37" + 1 = "371" instead of 38. Anyone have any idea why this is happening?
That's probably because Angular doesn't yet implement a handler for type="range" like it does with type="number", etc. You should probably report this on their Github site (under Issues).
In the mean time, you can get around it like this. That is, create your own range-model and add a parser to ngModelController that converts the value to a number.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('Ctrl', function($scope) {
$scope.age = 10;
$scope.retirementAge = 65;
})
.directive('rangeModel', function() {
return {
require: 'ngModel',
link: function($scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function(val) {
return parseInt(val, 10);
});
}
};
});
</script>
</head>
<body ng-controller="Ctrl">
<input type='range' min='15' max='{{retirementAge - 1}}' range-model name='age' ng-model='age' />
{{age}}
<input type='range' min='{{age + 1}}' max='90' name='retirementAge' range-model ng-model='retirementAge' />
{{retirementAge}}
</body>
</html>
add(first,second) method to my scope. Not ideal but it will do for now and it's obvious it should be removed at some point.
min='{{add(plan.age, 1)}}' works, but then you have to convert plan.age everytime you use it. By adding a $parser, you're making sure that the model will always be a number.