AngularJS notation in input type range min attribute

Question

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

Case 1:

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

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

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

with value.rangeInputMax equals 55 and value.rangeInputMin equals -55.

But they do not have the same output. For example let's says value.rangeInput is in both cases -10. Then in the 1st example the dot in the range slider is set at -10. But in the 2nd example the dot is set to 0. I tried to convert value.rangeInputMin and value.rangeInputMax into numbers and change the statement (without double quotes) to this:

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

I also tried with different notations, e.g. value.rangeInputMin, "value.rangeInputMin", tried to set it with ng-init, create another scope variable and assign the value in this one, etc.

But it is still showing a different behaviour than in the 1st case.

Answer 1

Per my comments above, I think you've found a bug as I'd expect to be able to declaratively set this value in your template alongside your min and max values. This simply isn't the case. A typical workaround for this is to set the model value after you've set your min and max values using $timeout. It's not ideal 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 it working here - http://codepen.io/jusopi/pen/vLQKJY?editors=1010

---

If you need to, you can write a simple directive to basically trigger ng-init-like functionality on the next $digest cycle. This might be a better solution if you run into this issue more than once of twice 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 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 2

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

JWGmeligMeyling created the ngMax and ngMin directives and they seem to work pretty 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