angularjs - 输入 [type=range] 值未更新答案

【问题标题】：angularjs - Input[type=range] value not updatedangularjs - 输入 [type=range] 值未更新
【发布时间】：2016-06-13 06:49:38
【问题描述】：

我在输入类型范围方面遇到了一个奇怪的问题。即使我强制更改该值也不会更新。我正在使用带角度的离子 1

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

...
<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() 函数

    $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); 
    }

这里是控制台输出。这完全没有意义。

但是，当我尝试在控制台中手动设置时，似乎还可以。

【问题讨论】：

你能更新一点你的代码吗？在摘要阶段后写入日志。例如： $timeout(function() { console.log(document.querySelector('#time').value); });并删除你的力值线
更新了上面的问题。谢谢
所以您总是遇到装订问题？您是否有其他具有 id time 的 DOM 元素会干扰您的输入？
no.. 仅适用于此输入范围。是的，我已经仔细检查过。没有 id 名称冲突。

标签： javascript angularjs ionic-framework

【解决方案1】：

尝试使用

$scope.minTimeStep = timeobj.decimal;

而不是

$scope.data.minTimeStep = timeobj.decimal;

嵌套对象导致问题。只需从您的 javascript 和 html 中删除数据。

【讨论】：

【解决方案2】：

我做了一个 hack。我只是在 $timer 函数中强制更新它。我不知道为什么。但它对我有用。

$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); 
}

【讨论】：