angularjs-Input [type = range]值未更新 [英] angularjs - Input[type=range] value not updated

问题描述

我在输入类型范围上遇到了一个奇怪的问题.即使我强制更改它，该值也不会更新.我正在使用离子1和角

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

我在下面有一个带有日期的按钮列表和一个输入范围滑块.

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()">
...

单击按钮，我将调用函数updateTimeRange()以重置下面的输入范围的最小值和最大值.这是updateTimeRange()函数

on click of the button I'll call the function updateTimeRange() to reset the min and max of the input range below. here is updateTimeRange() function

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

推荐答案

我遭到了黑客入侵.我只是在$ timer函数中强制更新它.我不知道为什么但这对我有用.

i did a hack. I just force update it in a $timer function. 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); 
}

这篇关于angularjs-Input [type = range]值未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！