How To Initialize The Value Of An Input[range] Using Angularjs When Value Is Over 100

August 29, 2023 Post a Comment

I try to initialize a slider using AngularJS, but the cursor show 100 when the value is over 100. Setting the value 150 in a range [50,150] fails with this code : The cursor is ba

Solution 1:

After searches and tries , a possible way is to define a custom directive :

<htmlng-app="App"><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope) {
			$scope.min = 50;
			$scope.max = 150;
			$scope.value = 150;
		}).directive('ngMin', function() {
			return {
				restrict: 'A',
				require: 'ngModel',
				link: function(scope, elem, attr) { elem.attr('min', attr.ngMin); }
			};
		}).directive('ngMax', function() {
			return {
				restrict: 'A',
				require: 'ngModel',
				link: function(scope, elem, attr) { elem.attr('max', attr.ngMax); }
			};
		});		
	</script></head><bodyng-controller="AppController" >
	{{min}}<inputng-model="value"ng-min="{{min}}"ng-max="{{max}}"type="range" />{{max}}<br/>
	value:{{value}}
</body></html>

Even it is working this is a non standard extension in order to manage a very basic use case.

Solution 2:

Try this new one.

You can configure angular to make it interpolate these values. And you can use your initial code after that ...

Isn't it magic ?

Use this code only once in your app. Once angular is configured, it will be working for all the future ranges you will use.

<htmlng-app="App"><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script>
        angular.module('App', ['App.controllers']);
        angular.module('App.controllers', [])
        /* Modify angular to make it interpolate min and max, for ngModel when type = range */
        .config(['$provide', function($provide) {
            $provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
                var ngModel = $delegate[0], controller = ngModel.controller;
                ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
                    if ('range' === attrs.type) {
                        var $interpolate = $injector.get('$interpolate');
                        attrs.$set('min', $interpolate(attrs.min || '')(scope));
                        attrs.$set('max', $interpolate(attrs.max || '')(scope));
                        $injector.invoke(controller, this, {
                            '$scope': scope,
                            '$element': element,
                            '$attrs': attrs
                        });
                    }
                }];
                return $delegate;
             }]);
         }])
         .controller('AppController', function($scope) {
             $scope.min = 50;
             $scope.max = 150;
             $scope.value = 150;
         });			
</script></head><bodyng-controller="AppController" >
	{{min}}<inputng-model="value"min="{{min}}"max="{{max}}"type="range"/>{{max}}<br/>
	value:{{value}}
</body></html>

Solution 3:

My lazy way of addressing this bug was to divide the min/max and step values by 100. So 300 becomes 3.0, etc. and values fall below 100. Then I multiply things back as needed.

Solution 4:

From https://github.com/angular/angular.js/issues/6726 a possible way could be to differ the update of the value in a timer.

<htmlng-app="App"><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope,$timeout) {
			$scope.min = 50;
			$scope.max = 150;
			$timeout(function() {
			    $scope.value = 150;
			});
		});		
	</script></head><bodyng-controller="AppController" >
	{{min}}<inputng-model="value"min="{{min}}"max="{{max}}"type="range" />{{max}}<br/>
	value:{{value}}
</body></html>

However it brings a useless complexity (especially when min,max and value are coming from a JSON REST API)

Solution 5:

Since this commit, the initial code give the expected result. Using release 1.6.0 allow to original code to show slider correctly :

<htmlng-app="App"><head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script><script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope) {
			$scope.min = 50;
			$scope.max = 150;
			$scope.value = 150;
		});		
	</script></head><bodyng-controller="AppController" >
	{{min}}<inputng-model="value"min="{{min}}"max="{{max}}"type="range" />{{max}}<br/>
	value:{{value}}
</body></html>

JavaScript Guide