当值超过100时如何使用AngularJS初始化输入[范围]的值答案

【问题标题】：How to initialize the value of an input[range] using AngularJS when value is over 100当值超过100时如何使用AngularJS初始化输入[范围]的值
【发布时间】：2014-10-19 18:00:12
【问题描述】：

我尝试使用 AngularJS 初始化一个滑块，但是当值超过 100 时光标显示 100。

在 [50,150] 范围内设置值 150 失败，代码如下：

<html ng-app="App">
<head>
	<script src="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;
		});		
	</script>
</head>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

光标放置不当（它显示的是 100 而不是 150）。如何将光标显示到正确的位置？

this forum 上可以解释发生的情况

更新
此错误报告为问题#6726

更新
问题#14982 被Pull Request 14996 关闭，解决问题见answer。

【问题讨论】：

我认为你有更好的，检查这个答案以及stackoverflow.com/questions/15656617/…
这里也有一些与此相关的有趣讨论。 github.com/angular/angular.js/issues/2404
谢谢我多次阅读这两个链接和其他一些链接，但我没有发现这是预期的行为还是错误？

标签： javascript angularjs input angularjs-directive range

【解决方案1】：

在搜索和尝试之后，一种可能的方法是定义一个自定义指令：

<html ng-app="App">
<head>
	<script src="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>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" ng-min="{{min}}" ng-max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

即使它正在工作，这也是一个非标准扩展，用于管理一个非常基本的用例。

【讨论】：

我见过类似的解决方案，也许是其他地方的确切解决方案。但是，这对我来说最有意义。

【解决方案2】：

试试这个新的。

您可以配置 angular 以使其插入这些值。之后你可以使用你的初始代码......

是不是很神奇？

此代码仅在您的应用中使用一次。配置 angular 后，它将适用于您将使用的所有未来范围。

<html ng-app="App">
<head>
    <script src="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>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range"/>{{max}}<br/>
	value:{{value}}
</body>
</html>

【讨论】：

好的，我明白你的意思了。那么最干净的是直接配置角度引擎。我编辑了我的答案，试试这个新的 sn-p ......然后告诉我......
我不接受您的回答，因为它会产生副作用。将attrs.$set('max', $interpolate(attrs.max || '')(scope)); 替换为attrs.$set('max', ''); 仍会触发更新。它不适用于 2 个滑块，并且在 angularJs 问题 github.com/angular/angular.js/issues/6726 中引用了此错误
你是对的，pb 是关于光标值而不是范围设置。很抱歉，我当时没有得到它。但出于某种原因，我不太了解我的解决方法仍然有效：plnkr.co/edit/VuqxFv4Ni72TYbK00dqp?p=preview（即使有两个滑块）

【解决方案3】：

我解决此错误的懒惰方法是将最小/最大值和步长值除以 100。所以 300 变为 3.0，以此类推，值低于 100。然后我根据需要将它们相乘。

【讨论】：

【解决方案4】：

从https://github.com/angular/angular.js/issues/6726 开始，一种可能的方法是改变计时器中值的更新。

<html ng-app="App">
<head>
	<script src="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>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

但是它带来了无用的复杂性（尤其是当 min、max 和 value 来自 JSON REST API 时）

【讨论】：

【解决方案5】：

由于这个commit，初始代码给出了预期的结果。
使用 release 1.6.0 允许原始代码正确显示滑块：

<html ng-app="App">
<head>
	<script src="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>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

【讨论】：