Angular JS ngModel: Преобразовать данные

Итак, у нас есть модель с «временем» в ней, отформатированная как «14: 00: 00». Мы используем timepicker углового ускорителя, но он ожидает объект даты JS или строку даты и времени ISO.Angular JS ngModel: Преобразовать данные

Моя первая мысль заключалась в том, чтобы сделать директиву, которая добавит $ 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:00 не отражаются timepicker. Если вы посмотрите на консоль, она сообщит, что ngModel находится в неправильном формате. Если вы измените время с помощью сборщика, вы увидите, что $ scope.myModel.time находится в правильном формате.

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

источник

2014-01-23 Grummle

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

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

источник

2014-01-23 20:28:09

цепочка форматирования не в рендере, цепочка форматирования находится в $ watch (ngModelWatch) и запускается на каждом дайджесте. Вы, однако, правы, что использование модели modelValue для timepickers вместо viewValue является причиной этой проблемы. Поскольку мы используем 0.8.0, мы просто модифицировали угловую бутстрап, чтобы использовать viewValue, и теперь он работает так, как ожидалось. Thx – Grummle

Спасибо за исправление. Обновлен ответ. –

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

источник

2014-01-23 20:28:16

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

Изменить $ modelValue to $ viewValue в render function.

источник

2014-10-02 08:27:04 Arman

Angular JS ngModel: Преобразовать данные

ответ

Смежные вопросы