Angular JS ngModel: данные преобразования

87
9

Итак, у нас есть модель с "временем" в ней, отформатированная как "14: 00: 00". Мы используем angular -boostrap timepicker, но он ожидает объект даты JS или строку ISO datetime.


Моя первая мысль заключалась в том, чтобы сделать директиву, которая добавит $parser/$formatter к контроллеру ngModel, который будет конвертировать его по пути и в нужный формат. Это работает с ошибкой для вывода, но не для ввода.


Я сделал скрипку здесь http://jsfiddle.net/HB7LU/1820/


myApp.directive('timespan',function($filter){
var dateFilter = $filter('date');
function parser(data){
return dateFilter(data,'HH:mm:ss');
};

function formatter(data){
var converted = '2000-01-01T' + data + '-06:00';
return converted;
};

return {
require: 'ngModel',
link:function(scope,element,attrs,ctrl){
ctrl.$parsers.unshift(parser);
ctrl.$formatters.unshift(formatter);
}
};
});


Как вы можете, когда вы открываете скрипку, 12:00 не будет отображаться таймером. Если вы посмотрите на консоль, она сообщит, что ngModel находится в неправильном формате. Если вы измените время с помощью сборщика, вы увидите, что $scope.myModel.time находится в правильном формате.


Как мне получить ngModel в правильном формате, прежде чем он попадет в timepicker?

спросил(а) 2021-01-19T19:05:58+03:00 2 месяца, 3 недели назад
1
Решение
106

timepicker в angular -bootstrap ожидает, что $modelValue будет датой (она передает его конструктору Date(), а затем анализирует часы и минуты от объекта). Поскольку он пишет свою собственную $render() на основе $modelValue, ваши форматирующие элементы не используются.

Я боюсь, что вы не получите то, что хотите, не сделав операцию в коде angular -bootstrap. Скорее всего, будет легче написать контроллер с двумя полями ввода (в течение нескольких часов и минут).

ответил(а) 2021-01-19T19:05:58+03:00 2 месяца, 3 недели назад
44

Возможное решение - создать директиву для ввода значения модели. Эта директива
получать дату в том же формате, что и timepicker - временная метка или объект Date, и отображать ее так, как вы хотите.

ответил(а) 2021-01-19T19:05:58+03:00 2 месяца, 3 недели назад
44

Я думаю, что timepicker должен использовать $viewValue в методе рендеринга. Поэтому лучшим решением этой операции является операция angular -bootstrap.

Измените $modelValue на $viewValue в функцию рендеринга.

ответил(а) 2021-01-19T19:05:58+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема