Question

所以我们有一个带有'time'的模型，格式为'14：00：00'。我们正在使用angular-boostrap的timepicker，但它需要JS日期对象或ISO日期时间字符串。

我的第一个想法是做一个指令，将$ 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反映出时间戳。如果你看一下控制台，就会抱怨ngModel格式错误。如果您使用选择器更改时间，您将看到$ scope.myModel.time的格式正确。

如何在获取timepicker之前将ngModel设置为正确的格式？

Answer 1

angular-bootstrap中的

timepicker期望$modelValue是一个日期（它将它传递给Date()构造函数，然后从对象中解析小时和分钟）。由于它根据$modelValue编写了自己的$render()函数，因此您的格式化程序未被使用。

如果不对angular-bootstrap代码进行一些手术，我担心你不会得到你想要的东西。编写具有两个输入字段（小时和分钟）的控制器可能会更容易。

Answer 2

一种可能的解决方案是为您的Model Value输入创建指令。这个指令会以与timepicker - timestamp或Date对象相同的格式接收日期，并以您想要的任何方式显示它。

Answer 3

我认为timepicker必须在render方法中使用$ viewValue。因此，最佳解决方案是对角度自举代码进行此手术。

在render function中将$ modelValue更改为$ viewValue。

Angular JS ngModel：转换数据

3 个答案: