AngularJS designation in input range range type min

Question

I would expect the following expression to have the same result:

Case 1:

<input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="-55" max="55"> 

Case 2 (the difference with case 1 is that I replaced 55 AngularJS scope variables):

 <input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min="{{value.rangeInputMin}}" max="{{value.rangeInputMax}}"> 

with value.rangeInputMax is 55, and value.rangeInputMin is -55.

But they do not have the same solution. For example, let value.rangeInput say value.rangeInput in both cases. Then, in the first example, the point in the range slider is set to -10. But in the second example, the point is set to 0. I tried to convert value.rangeInputMin and value.rangeInputMax to numbers and change the instruction (without double quotes):

 <input type="range" name="myRangeInput" ng-model="value.rangeInput" value="value.rangeInput" min={{value.rangeInputMin}} max={{value.rangeInputMax}}> 

I also tried with various notations, for example. value.rangeInputMin, "value.rangeInputMin", tried to set it using ng-init, create another scope variable and assign a value to that, etc.

But he still shows a different behavior than in the first case.

Answer 1

The problem is commented here: https://github.com/driftyco/ionic/issues/1948

JWGmeligMeyling created the ngMax and ngMin directives, and they seem to work very well:

 .directive('ngMin', function() { return { restrict : 'A', require : ['ngModel'], compile: function($element, $attr) { return function linkDateTimeSelect(scope, element, attrs, controllers) { var ngModelController = controllers[0]; scope.$watch($attr.ngMin, function watchNgMin(value) { element.attr('min', value); ngModelController.$render(); }) } } } }) .directive('ngMax', function() { return { restrict : 'A', require : ['ngModel'], compile: function($element, $attr) { return function linkDateTimeSelect(scope, element, attrs, controllers) { var ngModelController = controllers[0]; scope.$watch($attr.ngMax, function watchNgMax(value) { element.attr('max', value); ngModelController.$render(); }) } } } }) 

Here's the codepen: http://codepen.io/anon/pen/MKzezB

Answer 2

In my comments above, I think you found an error, since I expect it to be able to declaratively set this value in your template along with the min and max values. This is simply not so. A typical workaround for this is to set the model value after you set the min and max values ​​using $timeout . This is not perfect, but it works.

controller function

 function($timeout) { var vc = this // vc.rangeInput = -10; vc.rangeInputMin = -55; vc.rangeInputMax = 55; $timeout(function(){ vc.rangeInput = -10; }) } 

You can see how it works here - http://codepen.io/jusopi/pen/vLQKJY?editors=1010

---

If you need to, you can write a simple directive to basically run ng-init like functionality in the next $ digest loop. This might be the best solution if you come across this problem more than once in your design.

callLater directive

 .directive('callLater', [ '$timeout', function($timeout) { return { restrict: 'A', scope: { callLater: '&' }, link: function($scope, elem, attr) { $timeout(function(){ $scope.callLater() }) } } } ]) 

directive in the template

 <input type="range" name="myRangeInput" ng-model="vc.delayedInput" min="{{vc.rangeInputMin || -55}}" max="{{vc.rangeInputMax || 55}}" call-later="vc.delayedInput = -10;"> 

example - http://codepen.io/jusopi/pen/JGeKOz?editors=1010

Answer 3

Try removing value = "value.rangeInput" from the markup.