[英]angularjs - Input[type=range] value not updated
I'm having a weird problem with input type range. 输入类型范围出现问题。 The value is not updated even if I force change it.
即使我强制更改它,该值也不会更新。 I'm using ionic 1 with angular
我正在使用离子1
I got a list of buttons with dates and a input range slider below. 我在下面有一个带有日期的按钮列表和一个输入范围滑块。
...
<a grouped-radio="date" ng-model="data.date" ng-repeat="date in data.dates" class="button-small" ng-click="updateTimeRange(date)">{{date | date: 'd-MMM'}}</a>
...
<input type="range" id="time" name="time" min="{{data.minTimeStep}}" max="{{data.maxTimeStep}}" step="0.5" value="{{data.timeStep}}"
ng-model="data.timeStep" ng-change="getTime()">
...
on click of the button I'll call the function updateTimeRange() to reset the min and max of the input range below. 单击按钮后,我将调用函数updateTimeRange()重置下面的输入范围的最小值和最大值。 here is updateTimeRange() function
这是updateTimeRange()函数
$scope.updateTimeRange = function (selectedDate) {
var timeobj = _getMinTime(selectedDate); //function to get minimum time for the selected date
//updating the scopes but it does not work
$scope.data.minTimeStep = timeobj.decimal;
$scope.data.timeStep = timeobj.decimal;
$scope.data.time = timeobj.time;
//tried force update the value directly but does not work also.
//document.querySelector('#time').value = timeobj.decimal;
$timeout(function () {
console.log('timeout value: '+document.querySelector('#time').value);
});
console.log(timeobj);
console.log($scope.data);
console.log(document.querySelector('#time').value);
}
here is the console output. 这是控制台输出。 which is totally does not make sense.
这完全没有意义。
however when I tried setting manually in the console, and it seems ok. 但是,当我尝试在控制台中手动设置时,看起来还可以。
Try to use 尝试使用
$scope.minTimeStep = timeobj.decimal;
instead of 代替
$scope.data.minTimeStep = timeobj.decimal;
the nested object is causing the problem. 嵌套对象引起了问题。 Just remove data from you javascript and html.
只需从您的javascript和html中删除数据即可。
i did a hack. 我做了一个hack。 I just force update it in a $timer function.
我只是在$ timer函数中强制更新它。 I don't know why.
我不知道为什么 but it works for me.
但这对我有用。
$scope.updateTimeRange = function (selectedDate) {
var timeobj = _getMinTime(selectedDate); //function to get minimum time for the selected date
//updating the scopes but it does not work
$scope.data.minTimeStep = timeobj.decimal;
$scope.data.timeStep = timeobj.decimal;
$scope.data.time = timeobj.time;
//tried force update in the timer
$timeout(function () {
console.log('timeout value: '+document.querySelector('#time').value);
document.querySelector('#time').value = timeobj.decimal;
});
console.log(timeobj);
console.log($scope.data);
console.log(document.querySelector('#time').value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.