gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:34:40 24 4
gpt4 key购买 nike

我尝试使用 AngularJS 初始化 slider ,但当值超过 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

更新
问题#14982Pull Request 14996 关闭并解决问题,请参阅 answer .

最佳答案

经过搜索和尝试,一种可能的方法是定义自定义指令:

<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>

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

关于javascript - 当值超过 100 时,如何使用 AngularJS 初始化输入[范围]的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26453634/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com