Как показано в этом плункере, я хотел бы иметь ‹input type="number "/› ‹input type="range"/›, которые обновляют одну и ту же переменную $scope, а также друг друга.
Прямо сейчас, когда я обновляю один ввод, переменная $scope изменяется, но значение другой области пусто. Мне просто нужно связать один с data-ng-model и использовать data-ng-change на другом? Есть ли более чистое решение?
Вот пример, на который я буду ссылаться. Проблема в том, что диапазон — это строковое значение, а число — числовое значение.
Создайте экземпляр переменной в вашем контроллере и напишите функцию для обработки преобразования
$scope.data = 10;
$scope.setDataAsNumber = function() {
$scope.data = parseInt($scope.data, 10);
}
Создайте все свои элементы, привязанные к $scope.data
<input type="text" ng-model="data" ng-change="setDataAsNumber()">
<br>
<input type="number" ng-model="data">
<br>
<input type="range" ng-model="data" ng-change="setDataAsNumber()">
<br>
{{ data }}
Я решил это с помощью директивы ng-change.
Не уверен, почему это так, но когда вы меняете type="number" на type="text", это работает.
Я нашел этот обходной путь для input type="number", но кажется немного хакерским:
$scope.$watch('MyNumber',function(number) {
$scope.MyNumber = Number(number);
});
