javascript - AngularJS notation in input type range min attribute -
i expect following expression have same outcome:
case 1:
<input type="range" name="myrangeinput" ng-model="value.rangeinput" value="value.rangeinput" min="-55" max="55">
case 2 (difference case 1 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
equals 55 , value.rangeinputmin
equals -55.
but not have same output. example let's says value.rangeinput
in both cases -10. in 1st example dot in range slider set @ -10. in 2nd example dot set 0. tried convert value.rangeinputmin
, value.rangeinputmax
numbers , change statement (without double quotes) this:
<input type="range" name="myrangeinput" ng-model="value.rangeinput" value="value.rangeinput" min={{value.rangeinputmin}} max={{value.rangeinputmax}}>
i tried different notations, e.g. value.rangeinputmin, "value.rangeinputmin", tried set ng-init, create scope variable , assign value in one, etc.
but still showing different behaviour in 1st case.
the problem commented here: https://github.com/driftyco/ionic/issues/1948
jwgmeligmeyling created ngmax , ngmin directives , seem 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 codepen: http://codepen.io/anon/pen/mkzezb
Comments
Post a Comment