如何在AngularJS的视图中格式化数据?

时间:2013-11-15 15:14:11

标签: angularjs angularjs-view

<input type="text" ng-model="user.User.DateOfBirth">在我看来。 user.User.DateOfBirth目前采用YYYYMMDD格式,但我希望它在视图中显示为mm/dd/yyyy格式。是否可以将其转换为显示器?

2 个答案:

答案 0 :(得分:4)

这也可以帮到你

http://jsfiddle.net/mikeeconroy/Hu9m2/1/

.filter('myFormatDateFilter',function(){
    return function(input){
        if(angular.isDefined(input)){
           if(input.length >= 8){
                input = input.slice(0,8);

                input = input.slice(4,6) + '/' + input.slice(6,8) + '/' + input.slice(0,4);
            }
        }
        return input;
    };
});

答案 1 :(得分:1)

要以正确的格式输出数据,请尝试过滤器(在您的情况下为日期过滤器:http://docs.angularjs.org/api/ng.filter:date

嗯,对于另一种情况的输入。我猜你总是可以将输入绑定到另一个属性,观察并自己解析它然后将它分配给你的真实模型......

更多见解,您可以尝试这样的事情:

HTML:

<input type="text" ng-model="myDateInput">

在JS控制器中使用以下内容:

$scope.$watch('myDateInput', function (newValue) {
    $scope.user.User.DateOfBirth = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your real model should use
});

$scope.$watch('user.User.DateOfBirth', function (newValue) {
    $scope.myDateInput = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your input should use
});

强制用户使用某种输入格式可能会更好,可以通过某种模式匹配(以及验证)或某种特殊的日期输入/小部件来使用。