我对输入类型范围有一个奇怪的问题。即使我强制更改它,该值也不会更新。我使用带有角度的离子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);
}
这是控制台输出。这完全没有意义。
然而,当我尝试在控制台中手动设置时,似乎没问题。
答案 0 :(得分:0)
尝试使用
$scope.minTimeStep = timeobj.decimal;
而不是
$scope.data.minTimeStep = timeobj.decimal;
嵌套对象导致问题。只需从您的javascript和html中删除数据。
答案 1 :(得分:0)
我做了一个黑客。我只是强制在$ 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);
}